我正在使用 http://aehlke.github.com/tag-it/在我的代码中
如何与 View 模型绑定(bind)
html
<ul data-bind='jqueryui: "tagit",foreach: Tags' >
<li class="tagit-choice ui-widget-content ui-state-default ui-corner-all" data-bind='with: $data'>
<span class="tagit-label" data-bind='text: $data'></span>
<a class="tagit-close">
<span class="text-icon">×</span>
<span class="ui-icon ui-icon-close"></span>
</a>
<input type="hidden" name="item[tags][]" data-bind='value: $data' style="display: none;">
</li>
</ul>
js代码
function AppViewModel() {
var self = this;
function Tag(data) {
this.Name = data;
}
self.Tags = ko.observableArray([
new Tag('red'),
new Tag('blue'),
new Tag('green')
]);
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
提前感谢你的帮助!
最佳答案
这是基于罗伯特瓦格纳的回答的另一个用于 knockout 的绑定(bind)处理程序,因为我觉得它不够动态:
ko.bindingHandlers.tagit = {
//https://github.com/aehlke/tag-it
init: function (element, valueAccessor, allBindingsAccessor) {
var bind = function () {
valueAccessor().tags($(element).tagit("assignedTags"));
};
var options = $.extend({
allowSpaces: false,
caseSensitive: false,
showAutocompleteOnFocus: true,
afterTagAdded: function(t,s) { bind(); },
afterTagRemoved: function(t,s) { bind(); },
placeholderText: "",
preprocessTag: function () { },
beforeTagAdded: function (evt, tag) {
if (tag.tagLabel.length == 0 || tag.tagLabel.toLowerCase() === options.placeholderText.toLowerCase()) {
return false;
}
return true;
}
}, valueAccessor().options || {});
var tags = valueAccessor()["autocomplete"];
if (tags)
$.extend(options, {
autocomplete: $.extend({ source: tags.source, delay: 0, minLength: 0 },tags)
});
$(element).tagit(options);
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var tags = value.tags();
$(element).tagit("removeAll");
for (var x = 0; x < tags.length; x++) {
$(element).tagit("createTag", tags[x]);
}
}
};
我的预处理和自动完成功能:
self.TagAutocompleter = function (d, ds) {
DataMethod.postData("tag/autocomplete", d, function (data) {
ds(ko.utils.arrayMap(data, function (t) { return t.Tag; }));
});
};
self.TagProcessor = function (tag) {
return tag.toLowerCase().replace("#", '');
};
并在 html 中使用:
<ul data-bind="tagit:{tags:Tags, autocomplete:{source:TagAutocompleter, delay:250, minLength: 2}, options:{preprocessTag: TagProcessor}}">
</ul>
关于knockout.js - 如何在 knockout 中使用 tagit,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12855157/