Knockout: Add items into nested json hierarchy

问题

I would like to know how to add items within a nested hierarchy. I was able to do it when I was not using the mapping plugin, but only in the top level.

Here's the 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("");
};

I would like to know how to make the form (line 20 of html) working so it adds a slide. Thanks!

回答1:

What I would do, I'd create a separate View Model for each Array and try to keep them in a way so you would be able to add a new instance of that VM easily and also you are able to access to each observableArray in order to add or any manipulations.

In your code you don't have an access to this.slides to push new Slide which I could not find it in your code.
Example : 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 );

来源：https://stackoverflow.com/questions/37994245/knockout-add-items-into-nested-json-hierarchy