Javascript 敲除模板未渲染计算的可观察对象

下面是两个淘汰模板plugin和plugin2。两者都依赖于ko。计算的观察值，并且两个观察值的评估属性都设置为true。Plugin不渲染，但plugin2渲染

需要更改哪些内容才能使插件呈现（保持deferEvaluation==true）

在这里拉小提琴

HTML

<div id="plugin" data-bind="template: { name: 'template1', data: $data }" ></div>
<div id="plugin2" data-bind="template: { name: 'template2', data: $data }" ></div>

<script type="text/html" id="template1">
    <div data-bind="foreach: columns()">
        <span data-bind="text: displayText"></span>
    </div>
</script>

<script type="text/html" id="template2">
    <div data-bind="text: dataItem" ></div>
</script>

两者都依赖于计算的可观测值

不，他们不是<代码>插件仅依赖于

列

，这是一个永远不会填充的空observableArray。也许你应该在某处使用你的

loadGrid

computed observable

顺便说一句，

loadGrid

没有太大意义，因为在其当前状态下，计算可观察到，read方法甚至不返回任何内容

两者都依赖于计算的可观测值

不，他们不是<代码>插件仅依赖于

列

，这是一个永远不会填充的空observableArray。也许你应该在某处使用你的

loadGrid

computed observable

顺便说一句，

loadGrid

没有太大意义，因为在其当前状态下，计算可观察到，read方法甚至不返回任何内容

var gridData = {
    columns: [{
        displayText: 'Name'
    }, {
        displayText: 'Last Login Date'
    }, {
        displayText: 'Email'
    }]
};

function DataModel() {
    var self = this;

    self.columns = ko.observableArray([]);

    self.loadGrid = ko.computed({
        read: function () {
            self.columns(gridData.columns);
        },
        owner: this,
        deferEvaluation: true
    });

    self.id = ko.observable(1);

    self.dataItem = ko.computed({
        read: function () {
            return self.id() * 3;
        },
        owner: this,
        deferEvaluation: true
    });
}

dataModel = new DataModel();
ko.applyBindings(dataModel);