5

我有以下小提琴。我正在尝试为数组 cars 中的每个元素调用父方法 minimumMpgMsg。我尝试使用以下绑定但没有运气：

data-bind="text: lowestMpgMsg()"
data-bind="text: parent.lowestMpgMsg()"
data-bind="text: parent().lowestMpgMsg()"
data-bind="text: parent().lowestMpgMsg"

谢谢！

这是我的html

<div class="container">
<div id="template-container" data-template="template" data-bind="source: cars"></div>
<script id="template" type="text/x-kendo-template">
    <div>
        <span data-bind="text: brand"></span> - 
        <span data-bind="text: mpg"></span> - 
        <span data-bind="text: lowestMpgMsg()"></span> - 
    </div>
</script>

这是我的javascript

var viewModel = kendo.observable({
    cars: [
        {brand: "Toyota", mpg: 22},
        {brand: "Mini", mpg: 32},
        {brand: "Honda", mpg: 23}
    ],
    lowestMpgMsg: function(e) {
        var sorted = this.cars.sort(function(a, b) {
            return a.mpg - b.mpg > 0;
        });

        return e.mpg > sorted[0].mpg ? "no" : "yes";
    }
});

kendo.bind($("#template-container"), viewModel);
4

1 回答 1

7

简短的回答是您不必这样做——它会自动调用父级上的父级方法，让人想起原型链的工作方式。更长的答案是您的问题中没有列出正确的语法，并且代码在您使用的方式上有一个细微的错误this。

首先，请注意绑定不是 javascript。文档中的 MVVM 概述阐明了您不能在绑定中调用方法，因此带括号的任何内容都不会是合法的语法。即使可以，您也必须从汽车实例调用父方法两次：

var car = viewModel.cars[0];
var cars = car.parent();
var model = car.parent().parent();
var lowestFn = model.lowestMpgMsg.bind(model); //the bind makes this refer to the intended object

这意味着您需要一些东西来绑定到类似的东西parent().parent().lowestMpgMsg()

好消息是它的data-bind="text: lowestMpgMsg"行为会像你想要的那样。它将调用该项目的parent().parent().lowestMpgMsg(). 要查看基本父链的工作情况，请将模板更改为

    <script id="template" type="text/x-kendo-template">
        <div>
            <span data-bind="text: brand"></span> - 
            <span data-bind="text: mpg"></span> - 
            <span data-bind="text: lowestMpgMsg"></span> - 
        </div>
    </script>

和模型

    var viewModel = kendo.observable({
        cars: [
            {brand: "Toyota", mpg: 22},
            {brand: "Mini", mpg: 32},
            {brand: "Honda", mpg: 23}
        ],
        lowestMpgMsg: function(e) {       
            return Math.random();
        }
    });

现在，让我们来看看为什么你lowestMpgMsg的不工作。首先注意该方法会在您的视图模型上引发异常，但不会在包装的对象中引发异常：

viewModel.lowestMpgMsg({mpg:15}); //throws exception

var notWrapped = {
    cars: [
        {brand: "Toyota", mpg: 22},
        {brand: "Mini", mpg: 32},
        {brand: "Honda", mpg: 23}
    ],
    lowestMpgMsg: function(e) {
        var sorted = this.cars.sort(function(a, b) {
            return a.mpg - b.mpg > 0;
        });
        return e.mpg > sorted[0].mpg ? "no" : "yes";
    }
}
notWrapped.lowestMpgMsg({mpg:15}); //no exception

在lowestMpgMsg绑定期间调用 时，this.cars引用与 相同的对象，viewModel.cars并且是一个instanceof类型kendo.data.ObservableArray，它没有sort方法。

最后，确保对计算字段使用 get 方法，以便 MVVM 框架知道在依赖关系发生变化时更新它。

于 2014-06-10T03:24:27.087 回答