如何从剑道模板绑定中调用父方法？答案

【问题标题】：How to call a parent method from kendo template binding?如何从剑道模板绑定中调用父方法？
【发布时间】：2023-03-30 02:11:01
【问题描述】：

我有以下fiddle。我正在尝试为数组 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);

【问题讨论】：

标签： javascript mvvm knockout.js kendo-mvvm

【解决方案1】：

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

首先，请注意bindings are not 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方法。

最后，一定要use a get method for the calculated field，这样MVVM框架就知道在依赖关系发生变化时更新它。

【讨论】：