本机脚本：如何通过数据绑定将对象从页面传递到自定义组件？

Question

我有一个自定义组件，我想向它传递一个对象，我该怎么做？传递字符串很容易，但我无法发送任何可观察到的东西。

main-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'}));
}

main-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

如果您希望能够传入对象并连接事件（即<custom:theWidget data="{{ myDataObj }}" onSave="theSaveCallback" />），则需要创建一个插件。使用插件，您可以只扩展现有项目，例如 StackLayout，然后创建通过对象连接起来的属性绑定。

查看现有插件示例时，请密切注意new dependencyObservable.Property(...) 的用法，因为这些依赖可观察对象实际上是您自定义组件的属性（属性）的接线。这是一个例子：https://github.com/bradleygore/nativescript-materialdropdownlist/blob/master/materialDropdownList.ts#L92

Answer 2

这应该适合你

main-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;
}

main-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
}

当然，遵循关注点分离实践和 MVVM 模式并将不同文件中的视图模型与视图分开是更好的主意。（然后在需要的地方导入它们） 这样，您就可以在应用程序的任何地方轻松地以相同的结构重用它。