javascript - 您可以在 Kendo MVVM View 中编写纯 JavaScript 表达式(与 Knockout 一样)吗？

Question

在下面，isDirty 返回一个 bool 值，具体取决于用户是否更改了任何可观察的属性。

HTML

<div class="status-message" data-bind="text:isDirty ? user.nickName : user.suffix>

JS

viewModel = new kendo.observable({
   user: {
   emailAddress: user.emailAddress,
   firstName: user.firstName,
   middleInitial: user.middleInitial,
   lastName: user.lastName,
   title: user.title,
   suffix: user.suffix,
   nickName: user.nickName
}
});

我已经用 Knockout 完成了它，但由于某种原因我无法让它与 Kendo 的 MVVM 一起工作。

这只是剑道的限制吗？

Answer 1

你不能在data-bind中使用JS，但是还有其他方法可以实现你想要做的事情。一种方法是创建两个状态消息 div 并在两者上使用 visible 绑定(bind)。另一种方法是使用一种方法来获取要显示的数据。

HTML:

<div id="bindme">
    <!-- alternative #1 -->
    <input type="text" data-bind="value: user.emailAddress" />
    <div data-bind="visible: isDirty">
        <div class="status-message" data-bind="text: user.nickName"></div>
    </div>
    <div data-bind="invisible: isDirty">
        <div class="status-message" data-bind="text: user.suffix"></div>
    </div>

    <!-- alternative #2 -->
    <div class="status-message" data-bind="text: currentValue"></div>
</div>

JS:

viewModel = new kendo.observable({
    isDirty: false,
    user: {
        emailAddress: "a",
        firstName: "b",
        middleInitial: "c",
        lastName: "d",
        title: "e",
        suffix: "f",
        nickName: "g"
    },
    currentValue: function () {
        return this.get("isDirty") ? this.get("user.nickName") : this.get("user.suffix")
    }
});

viewModel.bind("change", function () {
    this.set("isDirty", true);
});

kendo.bind($("#bindme"), viewModel);

( demo )