knockout.js - Multiple Knockout components see the same properties -
update interestingly works if embed html template property of ko.component.register function.
https://jsfiddle.net/h5rnqwu4/1/
ko.components.register('item-2', { viewmodel: item2, template: '<div class="col-md-12" data-bind="visible: $parent.activeview()===\'item-2\'"> <h1>item 2</h1> <input data-bind="value: comment"/> <h3 data-bind="text: comment"></h3> </div>' }); maybe that's how supposed work?
first things first...i've created fiddle showing sample code can see going wrong.
https://jsfiddle.net/e427a7p2/1/
in essence have 2 components, each of have comment property. issue seem sharing same comment property, , when change 1 of them other changes too.
to replicate issue carry out following steps:
- click on item 1 , note contents of input box , text below.
- click on item 2 , note contents of input box , text below.
- go item 1 (click on header back) , change text in input box. should happen text below changes, doesn't.
- go item 2 (click on header back) , note contents of input box , text below. same input changed in step 3.
- change contents of input box on item 2 , can see text below changes.
- go item 1 (click on header back) , note contents of input box same changed them to. text below has still not changed.
so reason although they're meant separate viewmodels sharing (kind-of) comments property.
any idea i'm doing wrong here?
the html components follows:
<div id="item-1"> <div class="col-md-12" data-bind="with: item1, visible: activeview() === 'item-1'"> <h1>item 1</h1> <input data-bind="value: comment" /> <h3 data-bind="text: comment"></h3> </div> </div> <div id="item-2"> <div class="col-md-12" data-bind="with: item2, visible: activeview() === 'item-2'"> <h1>item 2</h1> <input data-bind="value: comment" /> <h3 data-bind="text: comment"></h3> </div> </div> and js follows:
var item1 = function item1() { var self = this; console.log(self); self.title = ko.observable('item 1'); self.comment = ko.observable('comment: item 1'); } var item2 = function item2() { var self = this; console.log(self); self.title = ko.observable('item 2'); self.comment = ko.observable('comment: item 2'); } ko.components.register('menu', { viewmodel: menu, template: {element: 'menu'} }); ko.components.register('item-1', { viewmodel: item1, template: {element: 'item-1'} }); ko.components.register('item-2', { viewmodel: item2, template: {element: 'item-2'} }); var vm = function vm() { var self = this; self.activeview = ko.observable(); sammy(function() { this.get('/', function(context) { self.activeview('menu'); }); this.get('#/item-1', function(context) { self.activeview('item-1'); }); this.get('#/item-2', function(context) { self.activeview('item-2'); }); }).run(); }; ko.applybindings(new vm()); thanks,
adam
items can defined in html. best way of doing in script tag. makes sure template can contain tables etc.
<script id="item-1" type="text/template"> <div>markup here</div> </script> in fiddle defining templates(item-1 , item-2) body. bind view model whole document ko.applybindings(new vm()); binds viewmodel item templates , not valid.
your html should this
<body> <div id="container"> <item-1></item-1> </div> <div id="item-1">item template id</div> <script type="text/javascript"> // bind view model container , not templates ko.applybindings(new viewmodel(),document.getelementbyid("container")); </script> </body> updated fiddle: https://jsfiddle.net/e427a7p2/2/
Comments
Post a Comment