0

我处于需要将具有淘汰赛绑定的元素加载到 DOM 的情况，但我并不总是希望这些绑定进行评估。在以下示例中，请参阅内部 div 了解我的意思：

<ul data-bind="foreach: planets">
    <li>
        Planet: <b data-bind="text: name"> </b>
        <div data-bind="if: capital">
            I still want to load this text for later display, when I define "capital"
            Capital: <b data-bind="text: capital.cityName"> </b>
        </div>
    </li>
</ul>


<script>
    ko.applyBindings({
        planets: [
            { name: 'Mercury', capital: null }, 
            { name: 'Earth', capital: { cityName: 'Barnsley' } }        
        ]
    });
</script>

我的特殊情况是，我为要加载到 dom 中的元素有“编辑”和“不编辑”模板，这两个模板都已加载到页面中。当我将此元素的新实例添加到页面时，我遇到了问题，因为“未编辑”模板已加载并查找尚未定义的值（因为用户正在将它们添加到新对象）。

我的具体例子：

<!-- ko foreach: books -->
    <div data-bind="visible: !editing()" class="row-fluid card-box">
        <div data-bind="visible: !isPaperback()"> // I want to load this but not evaluate the isPaperback because the user hasn't defined that yet - currently getting null reference errors here  
        </div>
    </div>
    <div data-bind="visible: editing" class="row-fluid card-box">

    </div>
<!-- /ko -->

我能想到的一个解决方案与我上面的问题配对，但如果有更好的方法来完成这项工作，我绝对愿意接受建议。为我的“newBook”对象设置非空默认值会更好吗，当用户单击“添加”时，它会被推送到“books”数组中？

4

1 回答 1

1

一种选择是使您的capital属性可观察并使用if绑定来限制该区域。然后，当您进行填充时capital，绑定将做出反应并显示您的内容。

这是一个示例：

var Planet = function(data) {
   this.name = data.name;
   this.capital = ko.observable(data.capital);
};

var viewModel = {
    planets: [
        new Planet({ name: 'Mercury', capital: null }),
        new Planet({ name: 'Earth', capital: { cityName: 'Barnsley' } })
    ]
}

ko.applyBindings(viewModel);

//populate capital in 2 seconds
setTimeout(function() {
    viewModel.planets[0].capital({ cityName: "Gotham" });
}, 2000);

http://jsfiddle.net/rniemeyer/QqPfV/

于 2013-03-26T00:37:37.973 回答