Question

我处于需要将元素加载到具有敲除绑定的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”数组？

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

有没有办法使用knockout的“if”绑定将元素加载到页面但不评估其他绑定？

1 个答案: