我必须使用带绑定的淘汰赛吗？

Question

我对淘汰赛还很陌生，并试图了解一些绑定应该如何工作。

我认为我可以在不需要 with 的情况下在普通绑定中引用一个可观察的子对象，但我无法让它工作。

我的模型和视图模型是；

        Model = function(name) {
            this.name = ko.observable(name);
        };

        ViewModel = function () {


            var list = ko.observableArray([new Model("Apple"), new Model("Pear")]),
                selectedItem = ko.observable();

            function selectItem(item) {
                selectedItem(item);
            }

            return {
                list: list,
                selectedItem: selectedItem,
                selectItem: selectItem
            };
        };

这里是绑定：

        <div id="content">
        <ul id="list" data-bind="foreach: list">
            <li data-bind="text: name, click: $parent.selectItem"></li>
        </ul>
    </div>

    <p>Will show selected item</p>
    <div data-bind="with: selectedItem">
        <span data-bind="text: name"></span>
    </div>
    <div>
        <p>Won't show selected item</p>
        <span data-bind="text: selectedItem().name()"></span>
    </div>

另外一个工作的fiddle 在这里。

据我所知，我应该能够看到 selectedItem().name 的值，但应用绑定会引发错误，但是如果 div 具有 with: selectedItem 绑定，它会完美运行。

在这种情况下，我是否没有选择，只能使用with 绑定？

Answer 1

设置绑定上下文旁边的with 弯曲也处理值为null 或undefinied 的情况。

来自documentation

如果您提供的表达式的计算结果为 null 或 undefined 根本不会绑定后代元素，而是会从文档中删除。

如果您不想使用with，您必须“手动”处理null 或undefinied 的情况，因此您只能在selectedItem() 返回的情况下调用name()。

这可以通过语句selectedItem() && selectedItem().name() 来完成。 （null，空字符串和undefinied 的计算结果为false，否则为true。）

所以下面的绑定是有效的：

<span data-bind="text: selectedItem() && selectedItem().name()"></span>

演示JSFiddle.