2

指定された式が true と評価された場合にのみ、マークアップのセクションにバインディングを適用してドキュメントに表示する (およびそのデータ バインド属性を適用する) 必要があります。slideUp/slideDown と可視バインディングを使用して実装しようとしました。違いは、slideUp/slideDown では、含まれているマークアップが常に DOM に残り、常にそのデータ バインド属性が適用されていることです。可視バインディングは、CSS を使用してコンテナー要素の可視性を切り替えるだけです。DOM に含まれているマークアップを物理的に追加または削除し、式が true の場合にのみバインディングを子孫に適用する必要があると思います。誰でもこの問題に対する良いアプローチを提案できますか?

4

1 に答える 1

6

私が理解しているように、バインディングを使用して HTML を変更したいと考えています。これを実現するには、HTML バインディングを使用できます。例として：

<div id="example">
    <input type="checkbox" data-bind="checked: value"/>
    <div id="wrapper" data-bind="html: setHTML"></div>
    <br />
    value: <span data-bind="text: value"></span>
</div>

var viewModel = kendo.observable({
    value: false,
    name: "Jack",
    setHTML: function (e) {
        var flag = this.get("value"),
            html;
        if(flag) { //include the html
            html = '<input id="name" data-bind="value: name" />';
            return html;
        } else { //remove the html
            return "";
        }
    }
});
kendo.bind($("#example"), viewModel);

挿入された HTML 要素は View-Model にバインドされないことに注意してください。これを実現するには、kendo.bind を手動で呼び出す必要があります。

kendo.bind($("#wrapper"), viewModel);

このソリューションがあなたのシナリオに適合することを願っています。

于 2013-05-05T11:01:22.660 に答える