main.js

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

widget / 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属性中。但是，在初始“渲染”之后，模型上的更改不会传播到UI中。

我在我的XML和基于JS的数据绑定中通过text={{ start }}尝试了基于XML的数据绑定。两者都只能在“初始渲染”中工作，不会更新任何更新。

有什么建议吗？谢谢！

Answer 1

好的，我有些不对劲。我构建了整个init的东西，因为我无法获得“数据”到我的“小部件”。毕竟这一切都是基于一个简单的小错误发生的......我试图使用bindContext而不是bindingContext而且所有地狱......

所以工作解决方案：

main.js

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

现在在durationRow.js中不需要任何其他内容。所有对rowData的JS访问都是通过bindingContext完成的，一切都像魅力一样......

Nativescript UI-Builder和Databinding

main.js

widget / durationrow.js

1 个答案: