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

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

main-page.js

main-page.xml

---

这应该对你有用

main-page.js

main-page.xml

当然，ebtter的想法甚至是遵循关注点分离实践和MVVM模式，将不同文件中的视图模型与视图分离（然后在需要时导入它们）

---

通过这种方式，您可以轻松地在应用程序的任何位置以相同的结构重用它。

如果您希望能够传入对象并连接事件（即

），则需要创建一个插件。使用插件，您只需扩展现有项（如StackLayout），然后创建属性绑定，将对象连接起来

---

在浏览现有插件示例时，请密切注意

新dependencyObservable.Property（…）

的使用，因为这些依赖性观察值实际上是定制组件属性（properties）的连接。这里有一个例子：

你好，尼克，谢谢你的回答，但这并不能解决我的问题。这是我的临时解决方案，但我希望我的自定义组件有自己的.js和自己的请求。它将根据几个参数调用api。我的自定义组件应该接收URL和一些参数来调用API。谢谢

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

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

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

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

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

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
}