【问题标题】:How can I bind a ko.observableArray of strings?如何绑定 ko.observableArray 字符串?
【发布时间】:2013-03-22 17:59:44
【问题描述】:

我正在尝试将 ko.observableArray 字符串绑定到模板,但我无法让模板获取数组中字符串的更改。

如果我绑定一组对象而不是一组字符串,我会更新 JSON,但在我实际更改第一个非数组值之前,它们不会触发任何内容。但是,我更喜欢找到一个字符串数组,因为我可以将数据模型直接发布回服务器,而无需任何后处理。

如何获取要触发的字符串数组的更新,以及如何确保它们正确触发更改而无需更新非数组值?

如果无法绑定到可观察的字符串数组,如何在更新可观察数组内的对象时触发事件?

在此处查看示例:http://jsfiddle.net/gcEHC/2/

在这个例子中,array3 的数据在值改变时会反映在模型中,但是对 array1 和 array2 的数据的改变永远不会显示出来。

JS:

var ViewModel = function() {
    this.value = ko.observable("hi")
    this.array1 = ko.observableArray(["hi", "there"]);
    this.array2 = ko.observableArray([ko.observable("hi"), ko.observable("there")]);
    this.array3 = ko.observableArray([{ data: "hi" }, { data: "there" }]);
};

ko.applyBindings(new ViewModel());

HTML:

<div class='liveExample'>   
    <p><input data-bind='value: value' /></p> 
    <div data-bind="foreach: array1">
        <p><input data-bind='value: $data' /></p> 
    </div>
    <div data-bind="foreach: array2">
        <p><input data-bind='value: $data' /></p> 
    </div>
    <div data-bind="foreach: array3">
        <p><input data-bind='value: data' /></p> 
    </div>
</div>

<pre data-bind="text: ko.toJSON($data)"></pre>

【问题讨论】:

    标签: knockout.js knockout-2.0 knockout-mvc


    【解决方案1】:

    在 KO 3 中,如果您在绑定中指向 $rawData,array2 示例将按预期工作。

    【讨论】:

    • 谢谢,忘了 $rawData ;有同样的问题,现在如果直接向数组传递一个可观察的字符串,它就可以工作了。
    【解决方案2】:

    来自docs:

    仅仅将一个对象放入 observableArray 并不能完全满足 该对象的属性本身是可观察的。当然可以 如果您愿意,可以使这些属性可观察,但这是一个 自主选择。 observableArray 只跟踪它的对象 保持,并在添加或删除对象时通知侦听器。

    您需要创建一个具有(您的字符串的)可观察属性的对象。然后制作这些对象的 observableArray。

    例如,以下示例在应用绑定 2 秒后更新对象的属性:

    var item = function(text) {
        var self = this;
    
        self.Name = ko.observable(text);
    }
    
    var vm = {
        items: ko.observableArray([
            new item('one'),
            new item('two'),
            new item('three')
            ])
    }
    
    ko.applyBindings(vm);
    setTimeout(function() {
        vm.items()[1].Name('updated!');
    }, 2000);
    

    这是一个完整的、可运行的示例:http://jsfiddle.net/psteele/z6gbM/

    【讨论】:

    • 当我创建了一个可观察字符串的可观察数组时,它仍然不起作用。请参阅上面链接的 jsfiddle 中的 array2。请注意,对可观察字符串数组的更改永远不会被拾取 - 无论内容是否可观察。
    • 嗨帕特里克,感谢您更新的代码 - 但问题是为什么这不起作用:this.array2 = ko.observableArray([ko.observable("hi"), ko.observable("there")]);。文档中没有任何内容表明它不应该工作。
    • 在array2 中,您在两个javascript“String”对象(“hi”和“there”)上创建了一个observableArray。由于 javascript 的字符串类型没有 ko.observable 的属性,因此对它的更改不会被淘汰赛捕获。
    • 抱歉,我不是绑定在 array2 中的两个 observable 字符串上,而不是两个字符串上吗?这和直接绑定到可观察字符串不一样吗?在这种情况下,绑定确实会实时更新。
    • 我将按原样接受这个答案,并提出另一个关于可观察的可观察数组的问题。
    猜你喜欢
    • 1970-01-01
    • 2013-01-20
    • 2016-03-23
    • 2014-11-06
    • 2014-08-24
    • 1970-01-01
    • 2023-03-17
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多