So fügen Sie ein Element in eine JSON in Knockout.js

Question

EDIT: Ich möchte in der Lage sein, jedes Element in das Objekt, nicht nur speziell zu altern.

Gibt es eine Möglichkeit, Elemente in einem JSON in Knockout.js hinzuzufügen? Ich möchte Alter in dieses vorhandene JSON unten hinzufügen und es auf der Webseite widerspiegeln. Die Klickfunktion in meinem Code fügt dem JSON das Alter hinzu, zeigt es aber nicht auf der Seite an. Ich habe auch versucht cleanNode() + applybindings zu verwenden, um die Bindungen wieder anzuwenden, aber die Elemente in der foreach sind

dupliziert 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> 

Code:

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); 
}); 

Geige Beispiel : https://jsfiddle.net/f8qbu1j8/6/

Answer 1

Legen Sie die Alter-Eigenschaft für das ursprüngliche JSON-Objekt fest, auch wenn Sie es leer lassen. Dies wird dazu führen, dass es sich ordnungsgemäß in Ihr Ansichtsmodell einbindet. Später können Sie dann den Alterswert für das Ansichtsmodell ohne Neuzuordnung festlegen. Sie sollten ko.mapping nur einmal für ein Objekt verwenden. Siehe unten:

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); 
}); 

Arbeits Geige: https://jsfiddle.net/dw1284/nvckyta4/

Answer 2

ich genehmigen Dennis Antwort. Nach dem Binden Sie Ihre „Viewmodel“ auf das Element „document.body“, können Sie Ihre json ändern, indem die Werte von „Viewmodel“ -Einstellung:

<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> 

die Javascript-Teil:

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

Das erste Mal Wenn Sie die mapping plugin verwenden, erstellt es basierend auf Ihrem Objekt eine Ansicht Model für Sie. Da Ihr Objekt keine Eigenschaft age hat, haben Sie in Ihrem Modell keine beobachtbare Variable für das Alter. Sobald Sie Ihr vorhandenes Ansichtsmodell mit einem neuen Objekt aktualisieren, werden nur die Variablen aktualisiert, die bereits zuvor erstellt wurden und in Ihrem Modell vorhanden sind.

Abgesehen davon, da Sie knockout verwenden Sie die Macht des Knockouts verwenden sollten und mit jquery in Ihrem Modell zu vermeiden, wo ich im Code sehen Sie Jquery für click Ereignis verwenden. Wie Sie vielleicht die Dokumentation zu knockout.js lesen, macht knockout das für Sie, indem Sie die click Bindung verwenden.

Ich nehme an, Sie werden eine Reihe von Objekten haben, hier ist mein Vorschlag, wie Sie Ihr Modell implementieren, so dass es in Zukunft einfacher für Sie wäre, Ihr Modell zu pflegen, wie Sie neue Funktionalitäten hinzufügen möchten.

Beispiel: 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);