NativeScript UI-Builder答案

【问题标题】：NativeScript UI-BuilderNativeScript UI-Builder
【发布时间】：2016-08-17 08:07:48
【问题描述】：

我尝试构建一个简单的类似表单的 UI，我想在其中动态添加多个 TextField 的行。我用 XML 和 JS 构建了一个自定义组件，因为在这些 TextField 中存在一些交互（开始、结束、持续时间）。

我是 NativeScript 的初学者，但我的数据绑定和事件结构正在运行。我能够通过 ui/builder 添加我的自定义组件。我完全陷入困境的地方是为这个组件实例获取“选项/参数”。我试图完成的是：添加我的自定义组件并为其提供一些数据，这些数据应该填充到 Obsverable 组件中。在稍后（保存）操作中，我希望能够从我的“主”视图中检索这些数据。

我的结构是这样的：

main.js

exports.loaded = function(args) {
    var page = args.object;
    page.bindingContext = model;

    var outerContainer = page.getViewById('outerContainer');

    var vma = builder.load({
        path: 'widgets/durationRow',
        name: 'durationRow'
    });

    outerContainer.addChild(vma);
};

自定义组件“durationRow.js”

var componentModel = new Observable({
    label:      "",
    start:      "",
    end:        "",
    duration:   ""
});

exports.onLoad = function(args){
    var container = args.object;
    container.bindContext = componentModel;
};

我尝试通过exports.componentModel 导出componentModel 并从main 中寻址vma.componentModel。但是 vma 是一个视图而不是“JS-module”。我真的被困住了，没有找到任何像我的场景一样的例子。

谁能指出我正确的方向，我怎样才能以正确的（或任何）方式做这些事情？

谢谢！

【问题讨论】：

您解决了吗？我正在尝试做类似的事情。

标签： javascript nativescript uibuilder

【解决方案1】：

所以这个问题的答案很简单：阅读documentation :)

有一个选项attributes 可以完全用于此目的。我最终得到了这个：

var row = builder.load({
    path: 'widgets/durationRow',
    name: 'durationRow',
    attributes: {
        bindingContext: bindingModel
    }
});
container.addChild( row );

在加载的小部件中，我将“插入”模型作为 bindingContext：

exports.onLoad = function(args){
    page = args.object;
    var model = page.bindingContext;
};

我希望这会有所帮助！

【讨论】：