javascript - 如何在knockout-postbox.js中预选Section以使内容可见

Question

在研究 Ryan Niemeyer 的辉煌之后 knockout-postbox.js我做了一些小的调整，并希望菜单以预选的部分打开。因此，我在 selectedSection 可观察对象的初始化中添加了一个变量，如下所示。

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

这会选择所需的部分，但该部分的内容仍然不可见。

这是预选的 View 模型部分:

var ProfileModel = function() {
    //apply a filter to turn the value that we receive into a boolean
    this.visible = ko.observable().subscribeTo("section", function(newValue) {
        return newValue === "Profile";
    });

   //some more code - syncing and subscribing/publishing observables.
};

HTML 是这样的:

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

问题是，如何使用 MenuModel 的 selectedSection 的预选设置来触发 ProfileModel 的 visible observable 可观察，以便显示内容？

完整 fiddle :http://jsfiddle.net/AsleG/b6gwn6ak/

Answer 1

subscribeTo 帮助器可以将 bool 值作为第二个参数，以指示您要使用最后发布的值来初始化它。然后您的比较函数可以作为第三个参数传递。它看起来像:

//apply a filter to turn the value that we receive into a boolean
this.visible = ko.observable().subscribeTo("section", true, function(newValue) {
    return newValue === "Profile";
});