Knockout: Hinzufügen von Elementen in geschachtelte JSON-Hierarchie

Question

Ich würde gerne wissen, wie Sie Elemente in einer geschachtelten Hierarchie hinzufügen. Ich konnte es tun, wenn ich das Mapping-Plugin nicht benutzte, sondern nur auf der obersten Ebene.

Hier ist der Fiddle: https://jsfiddle.net/kyr6w2x3/3/

<input type="text" 
data-bind="value: newSlideTitle" placeholder="Awesome slide name"> 

<button type="button" 
data-bind="click: $root.addSlide.bind($parent, $data)">Add slide</button> 


self.removeSlide = function(slide) { this.slides.remove(slide) }; 
self.addSlide = function(slide) { 
    this.slides.push(new Slide({ 
     slideTitle: this.newSlideTitle(), 
     slideImage: this.newSlideImage() 
     })); 
    self.newSlideTitle(""); 
    self.newSlideImage(""); 
}; 

Ich mag würde wissen, wie das Formular zu machen (Linie 20 von html) arbeiten, so fügt es eine Rutsche. Vielen Dank!

Answer 1

Was ich tun würde, würde ich ein separates View-Modell für jedes Array erstellen und versuchen, sie auf eine Weise zu halten, so dass Sie in der Lage sein würden, eine neue Instanz VM leicht hinzuzufügen und Sie auch zugreifen können jeder observableArray um hinzuzufügen oder irgendwelche Manipulationen.

In Ihrem Code Sie haben keinen Zugang zu this.slidesnew Slide zu schieben, das ich es nicht in Ihrem Code gefunden.
Beispiel: https://jsfiddle.net/kyr6w2x3/6/

function PageItemViewModel(data){ 
     var self = this; 
     self.pageName = ko.observable(data.pageName); 
     self.pageRows = ko.observableArray([]); 
     // create a new instance of PageRowItemViewModel for each data.pageRows 
     self.pageRows($.map(data.pageRows, function (item) { 
     return new PageRowItemViewModel(item); 
     })); 
    } 
    function PageRowItemViewModel(data){ 
     var self = this; 
     self.rowType = ko.observable(data.rowType); 
     self.slides = ko.observableArray([]); 
     self.rowBackgroundColor = ko.observable(data.rowBackgroundColor); 
     // create a new instance of SlideItemViewModel for each data.slides 
     self.slides($.map(data.slides, function (item) { 
      return new SlideItemViewModel(item); 
     })); 
    } 
    function SlideItemViewModel(data){ 
     var self = this; 
     self.slideTitle = ko.observable(data.slideTitle); 
     self.slideImage = ko.observable(data.slideImage); 
    } 
    function ViewModel(data){ 
    var self = this; 
    // Define an observableArray 
    self.pages = ko.observableArray([]); 
    self.OutputJson = function(){ 
     console.log(ko.toJSON(self)); 
    } 
    self.newSlideTitle = ko.observable(); 
    self.newSlideImage = ko.observable(); 
    // create a new instance of PageItemViewModel for each website 
    self.pages($.map(website, function (item) { 
     return new PageItemViewModel(item); 
    })); 

    self.removePage = function(pageName) { self.pages.remove(pageName) }; 
    self.removeRow = function(rowType) { this.pageRows.remove(rowType) }; 
    self.addRow = function(rowType) { 
    // 
    } 
     self.removeSlide = function(slide) { this.slides.remove(slide) }; 
    self.removeSlide = function(slide) { this.slides.remove(slide) }; 

    self.addSlide = function(item) { 
     //here you have an access to your item which is an instance of your PageRowItemViewModel 
     item.slides.push(new SlideItemViewModel({slideTitle :self.newSlideTitle() ?self.newSlideTitle() : "NEW" ,slideImage :self.newSlideImage() ? self.newSlideImage() : "NEW IMAGE" })); 
    }; 

} 
// rowImages:" 'image1.jpg','image2.jpg','image3.jpg' " 
var website = [ 
    {pageName: "Home", pageType:"home", pageRows: [ 
     {rowType: "slideshow", rowBackgroundColor: "#ddddef", slides: [  
      { slideTitle:"Fabulous", slideImage:"img1.png"}, 
      { slideTitle:"Amazing", slideImage:"img2.png"}, 
      { slideTitle:"Elegant", slideImage:"img3.png"} 
     ] }, 
     {rowType: "slideshow", rowBackgroundColor: "#ffddcc", slides: [  
      { slideTitle:"Wonderful", slideImage:"img1.png"}, 
      { slideTitle:"Compelling", slideImage:"img2.png"}, 
      { slideTitle:"Magestic", slideImage:"img3.png"} 
     ] } 
    ] 
    }, 
    {pageName: "about", pageRows: []}, 
    {pageName: "contact", pageRows: []} 
]; 


_vm = new ViewModel(website); 
ko.applyBindings(_vm);