如何在Knockout.js中將項添加到JSON中

Question

編輯：我希望能夠將任何元素添加到對象中，而不僅僅是特定的年齡。

有什麼方法可以將項目添加到Knockout.js中的JSON中嗎？ 我想將年齡添加到下面的現有JSON中，並將其反映在網頁上。我的代碼中的點擊功能會將年齡添加到JSON中，但無法在頁面上顯示。 我也曾嘗試使用cleanNode（）+ applybindings重新申請綁定，但在foreach中的項目複製

HTML：

<div data-bind="text: $data.name, visible: $data.name !== undefined" ></div> 
<div data-bind="text: $data.age, visible: $data.age !== undefined" ></div> 
<div data-bind="foreach: children"> 
    <div data-bind="text: $data.name"></div> 
</div> 
<button id="button">Test</button> 

代碼：

json = { 
    name: 'Scott', 
    children: [ 
     { id : 1, name : 'Alice' }, 
     { id : 2, name : 'Liv' } 
    ] 
} 

var viewModel = ko.mapping.fromJS(json); 
ko.applyBindings(viewModel, document.body); 

document.getElementById("button").addEventListener("click", function() { 
    json.age = "87"; 
    ko.mapping.fromJS(json, viewModel); 
}); 

小提琴例子： https://jsfiddle.net/f8qbu1j8/6/

Answer 1

即使將其留空，也可以在原始JSON對象上設置age屬性。這會導致它正確地映射到您的視圖模型。然後，稍後，您可以在視圖模型上設置年齡值，而無需重新映射。你只能在對象上使用一次ko.mapping。請看下圖：

HTML：

<div data-bind="text: $data.name, visible: $data.name !== undefined"></div> 
<div data-bind="text: $data.age, visible: $data.age !== undefined"></div> 
<div data-bind="foreach: children"> 
    <div data-bind="text: $data.name"></div> 
</div> 
<button id="button">Test</button> 

的JavaScript：

var json = { 
    name: 'Scott', 
    children: [ 
     { id : 1, name : 'Alice' }, 
     { id : 2, name : 'Liv' } 
    ], 
    age: null 
} 

var viewModel = ko.mapping.fromJS({}); 
ko.mapping.fromJS(json, viewModel); 
ko.applyBindings(viewModel, document.body); 

document.getElementById("button").addEventListener("click", function() { 
    viewModel.age(87); 
}); 

工作小提琴：https://jsfiddle.net/dw1284/nvckyta4/

Answer 2

我同意丹尼斯的答案。你的「視圖模型」結合的元素「document.body的」後，你可以通過設置「視圖模型」的值更改JSON：

<div data-bind="text: $data.name, visible: $data.name !== undefined"></div> 
<div data-bind="text: $data.age, visible: $data.age !== undefined"></div> 
<div data-bind="foreach: children"> 
    <div data-bind="text: $data.name"></div> 
</div> 
<button id="button">Test</button> 

的JavaScript部分：

var json = { 
    name: 'Scott', 
    children: [ 
     { id : 1, name : 'Alice' }, 
     { id : 2, name : 'Liv' } 
    ], 
    age: null 
} 

var viewModel = ko.mapping.fromJS({}); 
ko.mapping.fromJS(json, viewModel); 
ko.applyBindings(viewModel, document.body); 

document.getElementById("button").addEventListener("click", function() { 
    viewModel.age(87); // edit the property "age" 
    viewModel.children.push({id : 3, name : 'Adil' }); // add element to the property "children" 
}); 

Answer 3

第一次當您使用mapping plugin時，它會根據您的對象爲您創建一個視圖模型。由於您的對象沒有age屬性，因此您的模型中不會有年齡可觀察的變量。一旦用新對象更新現有的視圖模型，它就會更新那些已經在模型中創建並存在的變量。

除此之外，因爲你正在使用knockout你應該使用淘汰賽的力量，避免在您的模型中使用jquery在那裏我可以在你的代碼中看到您正在使用Jquery爲click事件。正如你可能會閱讀knockout.js文檔，敲除通過使用click綁定來完成。

我假設你將有一個對象數組，這裏是我的建議如何實現你的模型，所以在將來你會更容易維護你的模型，因爲你可能想添加新的功能。

實施例：https://jsfiddle.net/9aLvd3uw/248/

HTML：

<div data-bind="foreach :Items"> 
    <div data-bind="text: name, visible:name " ></div> 
    <div data-bind="text: age, visible: age" ></div> 
    <div data-bind="foreach: children"> 
     <div data-bind="text: name" class="nested"></div> 
    </div> 
    <button data-bind="click:$parent.UpdateAge">Update age to 87</button> 
    </div> 

JS：

var json = [{ 
    name: 'Scott', 
    children: [ 
     { id : 1, name : 'Alice' }, 
     { id : 2, name : 'Liv' } 
    ], 
    age:null 
},{ 
    name: 'Kevin', 
    children: [ 
     { id : 3, name : 'Mike' }, 
     { id : 4, name : 'Alex' } 
    ], 
    age:55 
}]; 
var MainViewModel = function(){ 
    var self = this; 
    self.Items = ko.observableArray(); 
    self.Items($.map(json, function (item) { 
    return new ItemViewModel(item); 
    })); 
    self.UpdateAge = function(item){ 
    //here you can have your logic to update the age. 
    item.age(87); 
    } 
} 
    var ItemViewModel = function (data){ 
    var self = this; 
    self.name = ko.observable(data.name); 
    self.children = ko.observableArray(data.children); 
    self.age = ko.observable(data.age); 
    } 
var vm = new MainViewModel(); 
ko.applyBindings(vm);