1

我试图在使用 KnockoutJS 时拥有jQuery 可选列表的功能,但无法使其正常工作。

使用自定义绑定,我成功地将ul元素转换为可选元素,并为选定和未选定事件创建事件处理程序。但是我应该将什么传递给维护所选元素的 ViewModel 函数?

到目前为止,这是我的代码:http: //jsfiddle.net/QCmJt/

我对这一切都很陌生,所以也许我以错误的方式接近这个......

4

2 回答 2

1

这是您的一些修改后的版本,它也可以正常工作。它在数组中的每个项目上使用一个 selected 属性,该属性是一个可观察的进行双向通信。如果你想要一个只是选定项目列表的属性,你总是可以创建一个依赖的 observable,或者只是一个过滤方法。

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');
        }
    }
};

对于非常简单的双向绑定,它并没有得到强化,但应该足够容易构建。

于 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 回答