0

この質問はそれを公開しています: jquery ui dialog with knockoutjs の統合

次のようなアイテムの配列を持つモデルがあります。

var viewModel = {
    items: ko.observableArray([])
}

viewModel.items.push(new DialogModel("title 1"));
viewModel.items.push(new DialogModel("title 2"));
viewModel.items.push(new DialogModel("title 3"));

次に、foreachステートメントを使用してマークアップでこれらのアイテムを表示します

<div data-bind="foreach: items">
    <div data-bind="text: title"></div>
    <button data-bind="click: open">Open</button>
    <button data-bind="click: close" >Close</button>
</div>

ボタンをクリックすると JQueryUI ダイアログを表示する必要があり、このダイアログはItemModel インスタンスにバインドする必要があります。ループ内にダイアログ コードを含めたくありません。これは、結果 DOM にコピーされて巨大になるためです。たとえば、テンプレートでダイアログを使用したいと思います。

JSFiddle モックアップはこちらhttp://jsfiddle.net/YmQTW/8/

何かご意見は？

4

1 に答える 1

0

開いているダイアログのみを含む配列を作成し、この配列をテンプレートにバインドできます。

このコードでは、開いているダイアログの DOM のみが複製されます。

var DialogModel = function (title) {
    var self = this;
    self.title = ko.observable(title);
    self.isOpen = ko.observable(false);
    self.open = function () {
        viewModel.shownDialogs.push(self);
        setTimeout(function () { self.isOpen(true); }, 0);
    };
    self.close = function () {
        this.isOpen(false);
    };
    self.isOpen.subscribe(function () {
        if(self.isOpen() === false)
            viewModel.shownDialogs.remove(self);
    })
};

var viewModel = {
    items: ko.observableArray([]),
    shownDialogs: ko.observableArray([]),
};

景色 ：

<div data-bind="foreach: shownDialogs">
    <div data-bind="template : 'tmpl'"></div>
</div>

フィドルを見る

お役に立てば幸いです。

于 2013-07-02T05:50:28.317 に答える