javascript - 如何从剑道模板绑定(bind)调用父方法？

Question

我有以下 fiddle .我正在尝试为数组汽车中的每个元素调用父方法 lowestMpgMsg。我曾尝试使用以下绑定(bind)但没有成功:

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

Answer 1

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

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

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 

这意味着您需要一些东西来绑定(bind)到类似 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 不起作用。首先注意该方法会在您的 View 模型上引发异常，但不会在被包装的对象中引发异常:

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 在绑定(bind)期间被调用时， this.cars 引用与 viewModel.cars 相同的对象并且是一个 instanceof 类型 kendo.data.ObservableArray，它没有 sort 方法。

最后一定要use a get method for the calculated field ，因此 MVVM 框架知道在依赖项发生变化时更新它。