Il binding del modello non funziona quando la fonte è null/indefinita

Question

Qualcuno può spiegarmi cosa c'è di sbagliato nel modello di visualizzazione o nel modello in this example jsfiddle?

Non funziona come previsto. Fondamentalmente il modello di vista contiene un oggetto e quell'oggetto è null. Nella vista, esiste un modello che si lega a questo oggetto. Poiché questo oggetto è nullo, non dovrebbe rendere il modello. Tuttavia, prova a rendere il modello e fallisce nel mio esempio. Se l'oggetto lavoro è nullo, allora non voglio rendere il modello.

In base a this article by Ryan, se un oggetto viewmodel contiene un oggetto nullo e esiste un "template associazione" per questo oggetto, non renderà il modello.

Qui è la mia vista del modello:

var job = function(title) { 
    this.jobTitle = ko.observable(title); 
} 

var ViewModel = function(first, last) { 
    this.firstName = ko.observable(first); 
    this.lastName = ko.observable(last); 
    //this.job = ko.observable(new job("software developer")); 
    this.job = ko.observable(null); 

    this.fullName = ko.computed(function() { 
     return this.firstName() + " " + this.lastName(); 
    }, this); 
}; 

ko.applyBindings(new ViewModel("FirstName", "LastName")); 

E questa è la vista:

<div class='liveExample'> 
    <p>First name: <input data-bind='value: firstName' /></p> 
    <p>Last name: <input data-bind='value: lastName' /></p> 
    <p data-bind="template: { name: 'editorTmpl', data: job }"></p> 
    <h2>Hello, <span data-bind='text: fullName'> </span>!</h2> 
</div> 

<script id="editorTmpl" type="text/html"> 
    Job: <input data-bind='value: jobTitle' /> 
</script> 

Answer 1

Il linked artifice è stato scritto quasi 3 anni fa. Al momento l'ultima versione di Knockout era intorno a 1.2.1.

E nel Knockout 1.2.1 il codice sta lavorando bene: Demo using KO 1.2.1

Tuttavia da allora Knockout è cambiata molto in modo che non sostiene più questo comportamento.

Al giorno d'oggi è necessario utilizzare il if option of the template vincolante

<p data-bind="template: { name: 'editorTmpl', if: job, data: job}"></p> 

Demo JSFiddle.

O il with (if) vincolante per ottenere lo stesso risultato:

<div class='liveExample'> 
    <p>First name: <input data-bind='value: firstName' /></p> 
    <p>Last name: <input data-bind='value: lastName' /></p> 
    <!-- ko with: job --> 
     <p data-bind="template: { name: 'editorTmpl'}"></p> 
    <!-- /ko --> 
    <h2>Hello, <span data-bind='text: fullName'> </span>!</h2> 
</div> 

Demo JSFiddle.

Answer 2

Si potrebbe circondare vincolante il modello con un div che utilizza il 'se' associazione dati al lavoro osservabile:

<div data-bind="if: job"> 
    <p data-bind="template: { name: 'editorTmpl', data: job }"></p> 
</div> 

Il modello di editor è nascosto quando il lavoro è nullo e visibile quando non è nullo.

EDIT:

Una soluzione migliore è quella di passare l'opzione 'se' per il legame modello:

<p data-bind="template: { if: job, name: 'editorTmpl', data: job }"></p>