Nativescript UI-构建器和数据绑定

Question

我尝试构建一个由多个 TextField 组成的自定义组件。该组件应该在内部通过 Observable 使用双向数据绑定。但我根本无法让它工作。

main.js

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

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

    model.vma = new Observable({
        label: "NiceLabel"
    });
    var vma = durationRow.init({
        model: model.vma
    });

    outerContainer.addChild(vma);
};

小部件/durationrow.js

exports.init = function(options){
    model = _.isUndefined( options )
        ? model
        : options.model;

    _.defaults(model, {
        label:      "no data given",
        start:      "",
        end:        "",
        duration:   "30"
    });

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

    durationRow.getViewById("startText").bind({ 
        sourceProperty: "start", 
        targetProperty: "text", 
        twoWay: true }, 
    model);

    return durationRow;
}

最初在 start、end、duration 字段中的数据被插入到我的 XML 布局视图的 text 属性中。但是在初始 "render".

之后，模型的更改不会传播到 UI

我在 XML 中通过 text={{ start }} 尝试了基于 XML 的数据绑定和基于 JS 的数据绑定。两者都只适用于 "initial render" 没有升级。

有什么建议吗？谢谢！

Answer 1

好吧，我有些不对劲。我构建了整个 init 东西，因为我无法将 "data" 连接到我的 "widget"。毕竟这一切都是基于一个简单的小错误而发生的......我试图使用 bindContext 而不是 bindingContext 和所有地狱......

所以可行的解决方案：

main.js

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

现在 durationRow.js 不需要其他任何东西了。所有对 rowData 的 JS 访问都是通过 bindingContext 完成的，一切都像一个魅力:)

Nativescript UI-构建器和数据绑定

Nativescript UI-Builder and Databinding

javascript

data-binding

nativescript

main.js

小部件/durationrow.js