knockout.js - event - knockoutjs custom binding



Qual è la differenza tra $ root e $ parent? (1)

La differenza è semplice:

  • $root riferisce al modello di vista applicato al DOM con ko.applyBindings ;
  • $parent riferisce all'ambito esterno immediato;

Oppure, visivamente, dalla prospettiva di $data :

Oppure, in parole della documentazione pertinente :

  • $parent : questo è l'oggetto del modello di vista nel contesto genitore, quello immeditamente al di fuori del contesto corrente.

  • $root : questo è l'oggetto del modello di vista principale nel contesto di root, ovvero il contesto padre più in alto. Di solito è l'oggetto che è stato passato a ko.applyBindings . È equivalente a $parents[$parents.length - 1] .

Vedrai solo una differenza pratica se i modelli di vista sono annidati su più livelli, altrimenti equivarranno alla stessa cosa.

Il vantaggio è piuttosto semplice da dimostrare:

var Person = function(name) {
  var self = this;
  self.name = ko.observable(name);
  self.children = ko.observableArray([]);
}
  
var ViewModel = function() {
  var self = this;
  self.name = 'root view model';
  self.mainPerson = ko.observable();
}

var vm = new ViewModel(),
    grandpa = new Person('grandpa'),
    daddy = new Person('daddy'),
    son1 = new Person('marc'),
    son2 = new Person('john');

vm.mainPerson(grandpa);
grandpa.children.push(daddy);
daddy.children.push(son1);
daddy.children.push(son2);

ko.applyBindings(vm);
th, td { padding: 10px; border: 1px solid gray; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<script type="text/html" id="person">
  <tr>
    <td data-bind="text: $root.name"></td>
    <td data-bind="text: $parent.name"></td>
    <td data-bind="text: $data.name"></td>
  </tr>
  <!-- ko template: { name: 'person', foreach: children } --><!-- /ko -->
</script>

<table>
  <tr>
    <th>$root</th>
    <th>$parent</th>
    <th>$data</th>
  </tr>
  <!-- ko template: { name: 'person', data: mainPerson } --><!-- /ko -->
</table>

$root è sempre lo stesso. Il $parent è diverso, a seconda di quanto profondamente sei annidato.

Sto imparando KnockoutJS, ma non capisco la differenza tra $root e $parent . Si prega di consultare questo jsfiddle o il seguente codice:

<div data-bind="foreach:mainloop">
    $data Value: <span data-bind="text:$data.firstName"></span> 
                  <span data-bind="text:$data.lastName"></span> --(1)

    <br/>
    $parent Value: <span data-bind="text:firstName"> </span> 
                   <span data-bind="text:$parent.lastName"></span>
    <br/>
    $root Value: <span data-bind="text:firstName"></span>
                 <span data-bind="text:$root.lastName"></span>
    <br/>
        <hr/>
</div>
var mainLoopModel = function () {
    var self = this; // Root Level scope
    self.mainloop = ko.observableArray([{
        'firstName': 'jhon'
    }, {
        'firstName': 'sam'
    }]);
    self.lastName = ko.observable('peters');
    /*if you remove $data before lastName in note (1) you get undefined error because because mainloop dont have lastName root model has lastName so you have to access using parent or higher level */
}

ko.applyBindings(new mainLoopModel());

Nel codice precedente $root e $parent sono entrambi utilizzati per lo stesso scopo: riferirsi alla variabile dell'ambito esterno. Mi piacerebbe sapere che c'è qualche differenza tra gli usi $root e $parent ? Se sì, per favore aiutami a capire con un buon esempio per un uso corretto.