嵌套的 ViewModel 依赖方法不起作用

Question

我正在开发一个数据审计 Web 应用程序，它有一个模型，其中包含多个由旧值、新值和当前值字段组成的字段集。当前值是一个计算字段（按 KO 术语），它使用相当简单的逻辑来决定是否应将旧值或新值用于当前值（基本上如果有新值则使用它，否则显示旧值）。整个表单中包含大约 20 个这样的字段集，我想避免为所有这些单独调用 kendo.bind。

这是我希望能够做的一个例子（文档有点说应该有效，但没有）：

<div id="practiceSection">
    <div id="phoneNumber">
        <h4>Phone Number</h4>
        <span>Display Value:</span>
        <input id="displayPhoneNumber" data-bind="value: phoneNumber.DisplayValue"/><br/>
        <span>Old Value:</span>
        <input id="oldPhoneNumber" data-bind="value: phoneNumber.OldValue"/><br/>
        <span>New Value:</span>
        <input id="newPhoneNumber" data-bind="value: phoneNumber.NewValue"/><br/>
    </div>
</div>​ 

还有 javascript：

String.IsNullOrEmpty = function(value) {
    var isNullOrEmpty = true;
    if (value) {
        if (typeof (value) == 'string') {
            if (value.length > 0)
                isNullOrEmpty = false;
        }
    }
    return isNullOrEmpty;
}

function FieldBlock(oldValue, newValue) {
    this.OldValue = oldValue;
    this.NewValue = newValue;

    this.DisplayValue = function() {
        var newValue = this.get("NewValue");
        if (String.IsNullOrEmpty(newValue))
            return this.get("OldValue");

        return newValue;
    };
}

kendo.bind($("#practiceSection"), kendo.observable({
    phoneNumber: new FieldBlock("111-111-1111", null) 
}));

jsfiddle

上面的代码导致FieldBlock.DisplayValue 始终返回未定义。奇怪的是，如果我将FieldBlock 对象直接传递给kendo.observable（而不是作为匿名对象的属性值），则依赖方法确实有效。 Here is a jsfiddle 展示了有效的方法以及我试图避免的方法。

这是预期的行为，还是我遗漏了一些简单的东西？我正在使用 2012.01.322 版本。

如果我没有遗漏任何东西，我可以做些什么来在 Kendo UI 中完成这项工作（请注意，我不是 js 忍者，所以不太可能编辑他们的代码）？也许有更好的方法来实现这种行为？

_{希望通过double posting这个问题向我信任的社区提出，我可能会得到更积极的回应}

Answer 1

我最终找到了一种解决方法（它有效，但我认为这不是真正的解决方案）。也许有更多 javascript 经验的人可以提供有关如何清理它的指示。 jsfiddle

问题似乎是我的依赖方法返回了undefined，因为我使用的是this.get("oldValue")，而我应该使用this.get("phoneNumber.oldValue")。这似乎是一个范围界定问题。为了处理要传递给 get 的 fieldName 部分，我将其作为函数对象的参数，如下所示：

function FieldBlock(oldValue, newValue, fieldName) {
    this.OldValue = oldValue;
    this.NewValue = newValue;

    this.DisplayValue = function() {
        var newValue = this.get(fieldName + ".NewValue");
        if (String.IsNullOrEmpty(newValue))
            return this.get(fieldName + ".OldValue");

        return newValue;
    };
}

kendo.bind($("#practiceSection"), kendo.observable({
    phoneNumber: new FieldBlock("111-111-1111", null, "phoneNumber"),
    faxNumber: new FieldBlock("999-999-9999", null, "faxNumber")    
})); 

就像我说的，这看起来很脏，但确实有效。我还不太确定在需要时如何处理另一层嵌套，但至少我知道问题出在哪里。

---

Received confirmation 来自 Telerik 的 Atanas，这实际上是一个错误：

您好，感谢您的澄清。我确认这是一个错误。 当存在嵌套视图模型时，“this”上下文是错误的。在你的 例如“this”应该是“phone”对象，但它是“viewModel”。

我找到了一个修复程序，它将成为下一个正式版本的一部分。直到 那么您可以使用您找到的解决方法。

感谢您报告此问题。

问候， 阿塔纳斯·科尔切夫 Telerik 团队

希望当其他人开始采用他们的 MVVM 解决方案时，它会得到解决。