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: <a href="https://jsfiddle.net/kyr6w2x3/3/" rel="nofollow">https://jsfiddle.net/kyr6w2x3/3/</a>

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


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.

<br /> 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. <br /> Example : <a href="https://jsfiddle.net/kyr6w2x3/6/" rel="nofollow">https://jsfiddle.net/kyr6w2x3/6/</a>

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


  • SQL substr function
  • c# Get object property from ArrayList
  • ReplaceWith carousel-inner with new items
  • How to push ViewController with slide effect from left to right? Animation name required
  • Transition height onload of d3js rect svg
  • Bootstrap Carousel Next/Prev not working
  • Chrome breakpoint on radio doesn't fire
  • Collapsible Sankey Diagram - D3
  • Adding a new element into the DOM with angularjs does not initiate it
  • Prevent parent page from scrolling when mouse is over embedded iframe
  • maven jboss-as:start A required class was missing … org/sonaty…/ArtifactResolutionException
  • Python Tkinter after event OOPS implementation
  • Access the state of control in Winforms from another application
  • Is there any way to use wpdb prepare statements for array implode(' OR ', $myArray)?
  • Deduce parent class of inherited method in C++
  • Is there any way to call saveCurrentTurnWithMatchData without sending a push notification?
  • SF2 Functional tests : “Resetting the container is not allowed when a scope is active”
  • Angular Bootstrap Carousel Slide Transition not working correctly
  • Why doesnt this Java loop in a thread work?
  • PayPal API Listener Website Payments Standard URI
  • LESS CSS how to modify parent property in mixin
  • Angular2 - Template reference inside NgSwitch
  • How to add a focus style to an editable ComboBox in WPF
  • Web.config system.webserver errors
  • Silverlight DependencyProperty.SetCurrentValue Equivalent
  • Force show.bind execution
  • Disable Enter in editText android
  • Regex thinks I'm nesting, but I'm not
  • What is the “return” in scheme?
  • jQuery tmpl and DataLink beta
  • How to disable jQuery.jplayer autoplay?
  • SQL merge duplicate rows and join values that are different
  • Proper way to use connect-multiparty with express.js?
  • How to set the response of a form post action to a iframe source?
  • Java static initializers and reflection
  • Android Google Maps API OnLocationChanged only called once
  • Linking SubReports Without LinkChild/LinkMaster
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • UserPrincipal.Current returns apppool on IIS
  • How to push additional view controllers onto NavigationController but keep the TabBar?