【问题标题】:Observable in ListView binds elements incorrectlyListView 中的 Observable 错误地绑定元素
【发布时间】:2015-08-08 20:07:15
【问题描述】:

在我的 NativeScript 应用程序中有一个 ListView。我想将一组 Observable 对象绑定到它以单独修改每个项目。然而,NativeScript 似乎为每个 ListView 项绑定了相同的单个项(绑定数组的最后一项)

这是我的布局:

<Page loaded="onPageLoaded">
    <StackLayout orientation="vertical">
            <ListView items="{{items}}">
                    <ListView.itemTemplate>
                            <Label text="{{name}}" />
                    </ListView.itemTemplate>
            </ListView>
    </StackLayout>
</Page>

ViewModel 是这样的:

var observableModule = require("data/observable");
var observableArray = require("data/observable-array");
var viewModule = require("ui/core/view");

var items =  [
    new observableModule.Observable({name:"Item 1"}),
    new observableModule.Observable({name:"Item 2"})
];

var pageData = new observableModule.Observable();
var page;

exports.onPageLoaded = function(args) {
    page = args.object;
    pageData.set("items",items);
    page.bindingContext = pageData;
};

我希望 ListView 显示“项目 1”和“项目 2”,但它显示“项目 2”、“项目 2”。您可以在此屏幕截图中看到问题:

顺便说一下,目前的目标是Android。

【问题讨论】:

    标签: javascript android nativescript


    【解决方案1】:

    问题在于 NativeScript 的 Observable 类定义属性的方式(它们引用保存在闭包中的 'this' 的副本,并在构造函数中重新定义属性,因此它们最终都引用了最后一个对象的值) .在data/observable/observable.ts(安装版本中的data/observable/observable.js)中对that的引用应该改为this。我用更改创建了一个pull request

    【讨论】:

    • 优秀的帖子!相反,只需使用 new Observable() 实例化 Observable,然后为每个属性添加 .set("my_property", my_value) 即可。
    • 运行 Nativescript 项目的非常有帮助的人改进了我的拉取请求并将更改合并到主分支中作为新的拉取请求#927
    【解决方案2】:

    请试试这个代码:

    var items = new observableArray.ObservableArray([]);
    var pageData = new observableModule.Observable();
    var page;
    
    exports.onPageLoaded = function(args) {
        page = args.object;
        items.push({name:"Item 1"});
        items.push({name:"Item 2"});
        pageData.set("items",items);
        page.bindingContext = pageData;
    };
    

    据我所知 observableArray 是 observable 的扩展类,因此您无需在创建 observable 数组时创建新的 observable 对象。

    【讨论】:

    • 虽然我仍然不知道为什么我的原始代码不起作用,但我可以接受这个解决方案。这对我来说似乎是一个错误,但我刚开始使用 NativeScript,所以我完全不确定
    • 我不确定这个解决方案是否是我想要的。如果我更改列表项并添加一个新项 (items.setItem(1,{name:"new item"})),则 UI 会更新。如果我只是修改现有项目(var a = items.getItem(1); a.name="changed item"; items.setItem(1,a);),则 UI 不会更改
    • 假设 items 绑定到 RadListview 并且 pageData 中有另一个对象。在这种情况下,我如何访问 RadListview 中的其他对象?
    猜你喜欢
    • 2012-03-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-31
    • 1970-01-01
    • 2015-08-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多