1

私はノックアウトにかなり慣れていないので、いくつかのバインディングがどのように機能するかを理解しようとしています。

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>

あるいは、実用的なフィドルがここにあります。

私が理解している限り、値を確認できるはずですselectedItem().nameが、適用バインディングはエラーをスローしていますが、div にwith: selectedItemバインディングがある場合は完全に機能します。

withこのタイプのシナリオでバインドを使用する以外にオプトインはありませんか?

4

1 に答える 1

2

バインディング コンテキストの設定以外の曲げは、値がまたはwithの場合も処理します。nullundefinied

ドキュメントから

null指定した式がまたはに評価される場合、undefined 子孫要素はまったくバインドされず、代わりにドキュメントから削除されます。

を使用したくない場合はwith、nullorundefiniedケースを「手動で」処理する必要があるため、何かが返されたname()場合にのみ呼び出すことができます。selectedItem()

これは、ステートメントで実行できますselectedItem() && selectedItem().name()。( null、空の文字列であり、それ以外の場合は to にundefinied評価されます。)falsetrue

したがって、次のバインディングが機能しています。

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

JSFiddle のデモ。

于 2013-05-02T17:44:41.110 に答える