Как вызвать родительский метод из привязки шаблона кендо?

Question

У меня есть fiddle. Я пытаюсь вызвать родительский метод lowMpgMsg для каждого из элементов внутри машин массива. Я стараюсь использовать следующие привязки без везения:

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

Короткий ответ в том, что вы не должны - это вызывает родительский метод на родитель автоматически, напоминающий, как работает цепочка прототипов. Более длинный ответ - правильный синтаксис, который не указан в вашем вопросе. И код имеет тонкую ошибку с тем, как вы используете 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, но не в объекте, который обернут:

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 знает, как обновить его при изменении зависимостей.