mvvm - 如何将 mvvm 可见和文本属性绑定(bind)到子项 kendo ui 菜单

Question

我正在尝试将可见属性和文本绑定(bind)到剑道 ui 菜单。我使用 MVVM 框架。当我更改 viewModel 子菜单项不可见的属性时不起作用。这是我的 fiddle example 中的 html 代码:

<ul id="menu" data-role="menu">
    <li>
        <span class="fa fa-globe"></span>
        Map
        <ul>
            <li><a href="#/home/index"><span class="fa fa-home"></span>Index</a></li>
            <li><a href="#/home/about"><span class="fa fa-info"></span>Info</a></li>
        </ul>
    </li> 
    <li data-bind="visible: isLogout">
        <a href="#" data-bind="click: logIn">
            <span class="fa fa-sign-in"></span>
            Log in
        </a>
    </li>
    <li data-bind="visible: isLogin">
        <span class="fa fa-user"></span>
        <span data-bind="text: userName"></span>
        <ul>
            <li><a href="#"><span class="fa fa-key"></span>Change password</a></li>
            <li><a href="#"><span class="fa fa-tags"></span>Refresh token</a></li>
            <li class="k-separator"></li>
            <li><a href="#"><span class="fa fa-sign-out"></span>Log out</a></li>
        </ul>
    </li>
</ul>

和js:

var viewModel = kendo.data.ObservableObject({
    isLogin: false,
    isLogout: true,
    userName: "",
    logIn: function(e) {
        //var text = $(e.item).children(".k-link").text();
        this.userName = "Jane Smith"; //John Smith
        this.isLogin = true;
        this.isLogout = false;
    }
});
kendo.bind($("#menu"), viewModel);

Answer 1

调用 observable 方法 set 而不是将值分配给属性像这样:
var _this = this;
this.set("userName", "Jane Smith");
this.set("isLogin", true);
直接分配给属性不允许更改事件通过绑定(bind)传播。

此外，您可以使用 visible 的组合，而不是将两个元素的可见性绑定(bind)到两个属性，因为它们彼此相关。和 invisible绑定(bind)到同一个属性。
<li data-bind="visible: isLogin"></li>
<li data-bind="invisible: isLogin"></li>