javascript - How to preselect Section in knockout-postbox.js so that the content is visible -
after looking ryan niemeyer's brilliant knockout-postbox.js made minor adapting , want menu open preselected section. hence added variable initialization of selectedsection
observable seen below.
var menumodel = function() { var preselected = "profile"; this.name = ko.observable().subscribeto("nickname"); this.sections = ["profile", "notifications","users","projects"]; this.selectedsection = ko.observable(preselected).publishon("section"); };
this selects desirable section, contents of section remains invisible.
here's preselected sections viewmodel:
var profilemodel = function() { //apply filter turn value receive boolean this.visible = ko.observable().subscribeto("section", function(newvalue) { return newvalue === "profile"; }); //some more code - syncing , subscribing/publishing observables. };
the html goes this:
<div id="menu"> <h2><span data-bind="text: name"></span>'s settings</h2> <ul class="nav nav-pills" data-bind="foreach: sections"> <li data-bind="css: { active: $root.selectedsection() === $data }"> <a href="#self" data-bind="text: $data, click: $root.selectedsection"></a> </li> </ul> </div> <div id="profile" data-bind="visible: visible"> <h3>profile</h3> <label>nick name: <input id="nick" data-bind="value: nickname" /> </label> <label>email: <input data-bind="value: emailaddress" /></label> </div>
the question is, how can trigger visible
observable of profilemodel
preselected setting of menumodel
's selectedsection
observable, such contents shown?
full fiddle: http://jsfiddle.net/asleg/b6gwn6ak/
the subscribeto
helper can take boolean second argument indicate want initialize using last published value. compare function can passed third arg. like:
//apply filter turn value receive boolean this.visible = ko.observable().subscribeto("section", true, function(newvalue) { return newvalue === "profile"; });
Comments
Post a Comment