我试图在使用 KnockoutJS 时拥有jQuery 可选列表的功能,但无法使其正常工作。
使用自定义绑定,我成功地将ul
元素转换为可选元素,并为选定和未选定事件创建事件处理程序。但是我应该将什么传递给维护所选元素的 ViewModel 函数?
到目前为止,这是我的代码:http: //jsfiddle.net/QCmJt/
我对这一切都很陌生,所以也许我以错误的方式接近这个......
我试图在使用 KnockoutJS 时拥有jQuery 可选列表的功能,但无法使其正常工作。
使用自定义绑定,我成功地将ul
元素转换为可选元素,并为选定和未选定事件创建事件处理程序。但是我应该将什么传递给维护所选元素的 ViewModel 函数?
到目前为止,这是我的代码:http: //jsfiddle.net/QCmJt/
我对这一切都很陌生,所以也许我以错误的方式接近这个......
这是您的一些修改后的版本,它也可以正常工作。它在数组中的每个项目上使用一个 selected 属性,该属性是一个可观察的进行双向通信。如果你想要一个只是选定项目列表的属性,你总是可以创建一个依赖的 observable,或者只是一个过滤方法。
创建了一个自定义绑定:
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');
}
}
};
对于非常简单的双向绑定,它并没有得到强化,但应该足够容易构建。
好的,我想出了一种方法来传递绑定到所选项目的数据:
$(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);
};
};