首页 文章

如何绑定ko.observableArray字符串？

提问于
浏览 次
8

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

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

如何触发我的字符串数组的更新，以及如何确保它们正确触发更改而无需更新非数组值？

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

请参阅此处的示例：http://jsfiddle.net/gcEHC/2/

在此示例中，当value更改时，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

2 回答

  • 5

    来自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/

    回复于
  • 9

    在KO 3中，如果在绑定中指向$ rawData，则array2示例将按预期工作 .

    回复于

相关问题