Собственный скрипт: как передать объект с страницы на пользовательский компонент с привязкой данных?

Question

У меня есть пользовательский компонент, и я хотел бы передать ему объект, как это сделать? Легко передать строку, но я не могу отправить ничего, что можно наблюдать или нет.

основные-page.js

exports.onInit = function(args) { 
    var page = args.object; 
    var pageData = new Observable(); 

    page.bindingContext = pageData; 

    pageData.set('customObject', {label: 'This is my Label'}); 

    // I've tried Observable as well, same undefined 
    // pageData.set('customObject', new Observable({label: 'This is my Label'})); 
} 

основного page.xml

<Page xmlns:customOtherControls="xml-declaration/mymodulewithxml"> 
    <customOtherControls:MyControl myString="Works fine" myObject="{{customObject}}" /> 
    <StackLayout> 
     <Label text="{{customObject.label}}" /> 
    </StackLayout> 
</Page> 

mymodulewithxml.xml

<StackLayout loaded="onMymodulewithxmlInit"> 
    <Label text="{{myString}}" /> 
    <Label text="{{myObject.label}}" /> 
</StackLayout> 

mymodulewithxml.js

function onMymodulewithxmlInit(args) { 
    console.log('myString', page.myObject); // "Works fine" 
    console.log('myObject', page.myObject); // undefined 
} 

Answer 1

Это должно работать для вас

главных-page.js

var pageData = new Observable(); 
pageData.set('customObject', {"label" : 'This is my Label'}); 
pageData.set('someString', "my random string"); 

exports.onLoaded = function(args) { 
    var page = args.object; 

    page.bindingContext = pageData; 
} 

основного page.xml

<Page xmlns:customOtherControls="xml-declaration/mymodulewithxml"> 
    <customOtherControls:MyControl /> 
    <StackLayout> 
     <Label text="{{customObject.label}}" /> 
     <Label text="{{someString}}" /> 
    </StackLayout> 
</Page> 

mymodulewithxml.xml

<StackLayout loaded="onLoaded"> 
    <Label text="{{ customObject.label }}" /> 
    <Label text="{{ someString }}" /> 
</StackLayout> 

mymodulewithxml.js

function onLoaded(args) { 
    var stack = args.object; 
    // you don't need to pass the context 
    // as the custom component has the parent page bindingContext 
    // however if you need different context you can create one 
    // and attach you main-page context entries to the newly created context 
    // or even better use MVVM pattern 
} 

Конечно, это даже ebtter идея следовать разделение касается практики и шаблон MVVM и отделить вид-модели в разных файлах из ваших представлений. (а затем импортировать их там, где это необходимо) Таким образом вы можете легко использовать его с той же структурой в любом месте своего приложения.

Answer 2

Если вы хотите иметь возможность передавать объекты и подключать события (например, <custom:theWidget data="{{ myDataObj }}" onSave="theSaveCallback" />), вам необходимо создать плагин. С помощью плагина вы можете просто расширить существующий элемент, такой как StackLayout, но затем вы создадите привязки свойств, которые соединяются через объекты.

При просмотре существующих примеров плагинов обратите внимание на использование new dependencyObservable.Property(...), так как эти наблюдаемые зависимости действительно являются проводкой для атрибутов (свойств) вашего настраиваемого компонента. Вот пример: https://github.com/bradleygore/nativescript-materialdropdownlist/blob/master/materialDropdownList.ts#L92