更新 Knockout JS 可观察数组中的元素答案

【问题标题】：Updating an element in a Knockout JS Observable Array更新 Knockout JS 可观察数组中的元素
【发布时间】：2014-01-28 06:14:49
【问题描述】：

我一直在阅读这个网站，最后有一个问题没有针对我的需要得到足够具体的回答，所以就这样吧。

我在 C# 应用程序中从传递给我的 KO 视图模型的数据数组创建了一个可观察数组。

    self.Stuff = ko.observableArray(data.Stuff);

这个数组没有可观察的元素，这就是我的问题。我需要通过 onclick 编辑元素（状态）。我知道我需要使元素可观察（不确定如何使用 data.Stuff 部分）或执行“valueHasMutated”，但我不完全确定该语法将如何工作。

当然，我的 push 和 remove 工作正常，因为它们会触发 arrayobservable 并刷新视图。

    if ($form.valid() && isValidStuff) {
        self.Stuff.push({ ABC: self.ABCInput(), XYZ: self.XYZInput(), Status: self.StatusInput()});
        self.resetValues();
    }

    self.removeStuff = function () {
        self.Stuff.remove(this);
    };

    self.StuffStatusChng= function (){
        //What to do?
        self.Stuff.vauleHasMutated();
    };

任何帮助或朝着正确的方向推动都会有很大的帮助，谢谢！如果我没有足够的信息，请告诉我我能提供什么。

谢谢，

【问题讨论】：

标签： c# knockout.js

【解决方案1】：

如何使用敲除映射插件：

http://knockoutjs.com/documentation/plugins-mapping.html

它有一个 fromJSON 方法，该方法接受一个 json 字符串数组，并为每个属性创建一个具有可观察属性的可观察数组：

可以在这里找到一个小提琴：http://jsfiddle.net/jiggle/uzn7Z/，注意一旦绑定，你可以更新名字，它会相应地更新属性

HTML：

<div data-bind="foreach: people">
       <div>
           <input type="text" data-bind="value:firstName"/>
           <span data-bind="text: firstName"></span>
           <span data-bind="text: lastName"></span>
    </div>

</div>

代码：

var stuff = '[{"firstName":"fred","lastName":"bloggs"},{"firstName":"david","lastName":"frost"}]';

console.log(stuff);
var people = ko.mapping.fromJSON(stuff);
console.log(people());
var viewModel ={};

viewModel.people=people;

ko.applyBindings(viewModel);

只需要下载并包含knockout.mapping.js。

【讨论】：

【解决方案2】：

这对你有帮助吗？

var OneStuff = function (data) {
    this.ABC = ko.observable(data.ABC);
    this.XYZ = ko.observable(data.XYZ);
    this.Status = ko.observable(data.Status);
};
self.Stuff = ko.observableArray(ko.utils.arrayMap(data.Stuff, function (oneStuffData) {
    return new OneStuff(oneStuffData);
}));

这将使单个属性可观察。

推：

self.Stuff.push(new OneStuff({ ABC: self.ABCInput(), XYZ: self.XYZInput(), Status: self.StatusInput()}));

【讨论】：