淘汰赛:将项目添加到嵌套的json层次结构中 [英] 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.

这是小提琴: 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("");
};

我想知道如何使表单(html的第20行)正常工作，以便添加一张幻灯片.谢谢！

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

推荐答案

我要做的是，我将为每个数组创建一个单独的视图模型，并尝试以某种方式保留它们，以便您可以添加新的VM的实例，您也可以访问每个observableArray以便添加或进行任何操作.

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.

在您的代码中，您无权访问this.slides来推送new Slide，而我在您的代码中找不到它.
示例: https://jsfiddle.net/kyr6w2x3/6/

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

这篇关于淘汰赛:将项目添加到嵌套的json层次结构中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！