Jak wywołać metodę rodzica z wiązania szablonu kendo?

Question

Mam następujące fiddle. Próbuję wywołać metodę macierzystą najniższyMpgMsg dla każdego z elementów wewnątrz samochodów tablicowych. Próbuję użyć następujących wiązań bez powodzenia:

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

Dziękujemy!

Oto mój 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> 

i tu jest mój 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

Krótka odpowiedź jest taka, że ​​nie trzeba - to wywołuje metodę rodzic na rodzic automatycznie, przypominający działanie łańcucha prototypów. Dłuższą odpowiedzią jest poprawna składnia, która nie jest wymieniona w pytaniu ORAZ kod ma subtelny błąd w sposobie, w jaki używasz this. Najpierw zauważ, że bindings are not javascript Przegląd MVVM w dokumentacji wyjaśnia, że ​​nie można wywoływać metod w wiązaniach, więc nic z nawiasami nie będzie składnią prawną. Nawet jeśli można, trzeba by wywołać metodę nadrzędnej dwukrotnie z instancji samochodu:

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 

Oznacza to, że trzeba coś do wiązania się z czymś jak parent().parent().lowestMpgMsg()

Dobrą wiadomością jest to, że data-bind="text: lowestMpgMsg" będzie zachowywać tak jak chcesz. Będzie wywoływać element obiektu: parent().parent().lowestMpgMsg(). Aby zobaczyć podstawowe funkcjonowanie łańcucha rodzic, zmieniając szablon

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

i modelem do

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

Teraz przejdźmy do dlaczego lowestMpgMsg nie działa. Zacznij od zauważyć, że metoda zgłasza wyjątek na swoim viewmodel, ale nie w obiekcie, który jest owinięty:

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 

Gdy lowestMpgMsg jest wywoływany podczas niewiążący, this.cars odnosi się do tego samego obiektu jako viewModel.cars i jest instanceof typ kendo.data.ObservableArray, który nie ma metody sort.

Wreszcie, należy pamiętać, aby use a get method for the calculated field, więc framework MVVM wie, aby zaktualizować go, gdy zmieniają się zależności.