Come chiamare un metodo genitore dal binding del modello di kendo?

Question

Ho il seguente fiddle. Sto provando a chiamare il metodo genitore lowestMpgMsg per ciascuno degli elementi all'interno delle vetture dell'array. Ho provato a utilizzare i seguenti attacchi senza fortuna:

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

Grazie!

Ecco il mio 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> 

e qui è il mio 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

La risposta breve è che non c'è bisogno di - si chiama il metodo genitore su il genitore automaticamente, che ricorda come funziona la catena di prototipi. La risposta più lunga è la sintassi corretta non è elencata nella tua domanda E il codice ha un sottile errore nel modo in cui stai usando this.

Innanzitutto, notare che bindings are not javascript. La panoramica MVVM nella documentazione chiarisce che non è possibile richiamare i metodi nei binding, quindi nulla con la parentesi sarà una sintassi legale. Anche se si potesse, si dovrà chiamare il metodo genitore due volte da un'istanza auto:

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 

Questo significa che si avrebbe bisogno di qualcosa di legarsi a qualcosa di simile parent().parent().lowestMpgMsg()

La buona notizia è che data-bind="text: lowestMpgMsg" si comporteranno come tu lo vuoi Chiamerà l'articolo parent().parent().lowestMpgMsg(). Per vedere il funzionamento di base della catena genitore, cambiando il modello di

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

e il modello per

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

Ora, veniamo al motivo per cui il lowestMpgMsg non funziona. Inizia notando che il metodo genera un'eccezione sul ViewModel, ma non nell'oggetto che è avvolto:

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 

Quando il lowestMpgMsg viene invocato durante vincolante, la this.cars riferisce allo stesso oggetto come viewModel.cars ed è un instanceof digitare kendo.data.ObservableArray, che non ha un metodo sort.

Infine, assicurarsi di use a get method for the calculated field, in modo che il framework MVVM sappia aggiornarlo quando le dipendenze cambiano.