1

KnockoutJS を使用するときにjQuery の選択可能なリストの機能を使用しようとしていますが、機能させることができません。

カスタム バインディングを使用して、ul要素を選択可能な要素に変換し、選択されたイベントと選択されていないイベントのイベント ハンドラーを作成することに成功しました。しかし、選択した要素を保持する ViewModel 関数には何を渡すのでしょうか?

これまでの私のコードは次のとおりです: http://jsfiddle.net/QCmJt/

私はこれに慣れていないので、間違った方法でアプローチしている可能性があります...

4

2 に答える 2

1

これはあなたのものを少し変更したもので、同様に機能しています。配列内の各項目で選択されたプロパティを使用して、双方向通信を行います。選択したアイテムの単なるリストであるプロパティが必要な場合は、常に依存オブザーバブルを作成するか、単にフィルターする方法を作成できます。

http://jsfiddle.net/QCmJt/32/

カスタム バインディングを作成しました。

ko.bindingHandlers.selectableItem = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var selectable = $(element).parent();

        selectable.bind('selectableselected', function(event, ui) {
            if(ui.selected === element) {                
                var value = valueAccessor();

                value(true);
            }
        });

        selectable.bind('selectableunselected', function(event, ui) {
            if(ui.unselected === element) {                
                var value = valueAccessor();

                value(false);                
            }
        });
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var el = $(element);

        if(valueAccessor()()) {
            el.addClass('ui-selected');
        } else {
            el.removeClass('ui-selected');
        }
    }
};

非常に単純な 2 ウェイ バインディング以上に強化されているわけではありませんが、簡単に構築できるはずです。

于 2011-11-02T20:28:25.290 に答える
0

わかりました、選択したアイテムにバインドされたデータを渡す方法を考え出しました:

$(ui.selected).tmplItem().data選択 $(ui.selected).tmplItem().data時と選択解除時。

ここで更新されたフィドル: http://jsfiddle.net/8RnxC/

カスタム バインディングは次のようになります。

ko.bindingHandlers.selectable = {
        init: function(element, valueAccessor) {
            $(element).attr("id", "selectable").selectable({
                selected: function(event, ui) {
                    vm.selectRequest($(ui.selected).tmplItem().data);
                },
                unselected: function(event, ui) {
                    vm.unselectRequest($(ui.unselected).tmplItem().data);
                }
            });
        }
    };

そして私のビューモデル:

function viewModel() {
        // Data
        this.requests = ko.observableArray([]);
        this.selectedRequests = ko.observableArray([]);

        // Behaviours
        this.selectRequest = function(request) {
            this.name = "othername";
            // Add to array if not already there.
            if ($.inArray(request, this.selectedRequests()) === -1) {
                this.selectedRequests().push(request);
            }
            var self = this;

        };
        this.unselectRequest = function(request) {
            // Remove from the array.
            this.selectedRequests().splice($.inArray(request, this.selectedRequests()), 1);
        };
    };
于 2011-11-02T19:52:34.630 に答える