当源为null/undefined时,模板绑定不起作用

Question

在这个例子jsfiddle中,有人能解释我的视图模型或模板有什么问题吗？

它没有按预期工作.基本上视图模型包含一个对象,该对象是null.在视图中,有一个绑定到此对象的模板.由于此对象为null,因此不应呈现模板.但是,它确实尝试渲染模板并在我的示例中失败.如果job对象为null,那么我不想渲染模板.

根据Ryan的这篇文章,如果一个viewmodel包含一个null对象并且该对象有一个" template绑定",它将不会呈现该模板.

这是我的视图模型:

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")); 

这就是观点:

<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

该链接的技巧几乎是3年前写的.当Knockout的最新版本大约为1.2.1时.

在Knockout 1.2.1中,您的代码工作正常:使用KO 1.2.1进行演示

但是从那以后Knockout已经发生了很大变化,所以它不再支持这种行为了.

现在您需要使用 if模板绑定选项

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

演示JSFiddle.

或者with(if)绑定实现相同的结果:

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

演示JSFiddle.