Soy nuevo en knockout y quiero tener 2 enlaces en la página con 2 modelos. Me gustaría que el evento de clic en los enlaces cambie el modelo de vista que se muestra. Lo intenté de varias maneras y tengo un jfiddle https://jsfiddle.net/edgrttj3/7/ pero no puedo hacer que funcione. ¿Alguna idea de lo que podría estar haciendo mal?
<div id="content"> <a id="button1" href="#" >View 1</a> <a id="button2" href="#" >View 2</a> <hr /> <div data-bind="with: selectedView"> <div data-bind="template: { name: templateName, data: data }"></div> </div> <script id="oneTmpl" type="text/html"> <ul data-bind="foreach: items"> <li> <span data-bind="text: id"></span> <input data-bind="value: name" /> </li> </ul> </script> <script id="twoTmpl" type="text/html"> First: <input data-bind="value: firstName" /> Last: <input data-bind="value: lastName" /> </script> </div>Aquí está el javascript:
var View = function (title, templateName, data) { this.title = title; this.templateName = templateName; this.data = data; }; var subModelA = { items: ko.observableArray([ { id: 1, name: "one" }, { id: 2, name: "two" }, { id: 3, name: "three" } ]) }; var subModelB = { firstName: ko.observable("Bob"), lastName: ko.observable("Smith") }; var viewModel = { views: ko.observableArray([ new View("one", "oneTmpl", subModelA), new View("two", "twoTmpl", subModelB) ]), selectedView: ko.observable() }; function setSelectedView(newview) { alert(newview); if (newview == "oneTmpl") { viewModel.selectedView = viewModel.views[0]; } else { viewModel.selectedView = viewModel.views[1]; } }; ko.applyBindings(viewModel); document.getElementById ("button1").addEventListener("click", setSelectedView('oneTmpl'), false); document.getElementById ("button1").addEventListener("click", setSelectedView('twoTmpl'), false);En realidad, su implementación está casi lista. Solo hay un par de ajustes que debes hacer.
selectedView(valueIsHere) .views()[0]Así es como se ve después de la actualización:
var View = function (title, templateName, data) { this.title = title; this.templateName = templateName; this.data = data; }; var subModelA = { items: ko.observableArray([ { id: 1, name: "one" }, { id: 2, name: "two" }, { id: 3, name: "three" } ]) }; var subModelB = { firstName: ko.observable("Bob"), lastName: ko.observable("Smith") }; var ViewModel = function (){ this.views = ko.observableArray([ new View("one", "oneTmpl", subModelA), new View("two", "twoTmpl", subModelB) ]); this.selectedView = ko.observable(); this.select = function(id){ if (id === 1) { this.selectedView(this.views()[0]); } else { this.selectedView(this.views()[1]); } }; }; ko.applyBindings(new ViewModel());Y aquí hay algunos cambios en el botón:
<a id="button1" href="#" data-bind="click: select(1)">View 1</a> <a id="button2" href="#" data-bind="click: select(2)">View 2</a>