Question

我在我的代码 使用http://aehlke.github.com/tag-it/如何与视图模型

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">&times;</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()); 

感谢绑定提前为您的帮助！

Answer 1

感谢塞德里克不需要编写定制绑定

我解决这样link

$("#mytags").tagit({ 
availableTags: JSON.parse(ko.toJSON(_.pluck(AppViewModel.Tags, 'Name'))), 
onTagAdded: function (event, tagval) { 
        //on every add add with id if tag exist in system 
        var newtag = $(tagval).children('span.tagit-label').html(); 
        var temp = _.find(AppViewModel.Tags, function (item) { return item.Name() == newtag; }); 
        if (temp) { 
          AppViewModel().SelectedTags.push(Tag({ 'Id': temp.Id(), "Name": newtag})); 
        } 
        else { 
          AppViewModel().SelectedTags.push(Tag({ "Name": newtag})); 
        } 

       }, 
onTagRemoved: function (event, tagval) { 
        // do something special 
        var tempTag = $(tagval).children('span.tagit-label').html(); 
        AppViewModel().SelectedTags.remove(_.find(SelectedTags(), function (item) { return item.Name == tempTag; })); 
       }}); 

Answer 2

我写了一个简单的小提琴它的工作。它是带有de标签列表的构造组件。 Fiddle

但它不是两种方式的约束力。 如果你不想这样做，我建议你创建一个自定义联编程序，在其中调用淘汰赛的foreach模型联编程序。 See information to Custom model binders

在init函数上，您需要对knockout的observableArray中的变量进行subscibe来更新控件。您需要订阅onTagAdded事件和onTagRemoved事件。

有一个示例代码，我延长的foreach组件：

ko.bindingHandlers.extendForeach = { 
    makeForeachValueAccessor: function (valueAccessor) { 
     return function() { 

      if ((!bindingValue) || typeof bindingValue.length == "number"){ 
       bindingValue = { 
        data : bindingValue 
       } 
      } 

      return { 
       'data': bindingValue['data'], 
       'afterAdd': bindingValue['afterAdd'], 
       'beforeRemove': bindingValue['beforeRemove'], 
       'afterRender': bindingValue['afterRender'], 
      }; 
     }; 
    }, 

    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var newValAccess = ko.bindingHandlers.extendForeach.makeForeachValueAccessor(valueAccessor); 
     return ko.bindingHandlers.foreach.init(element, newValAccess, allBindingsAccessor, viewModel, bindingContext); 
    }, 

    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var newValAccess = ko.bindingHandlers.extendForeach.makeForeachValueAccessor(valueAccessor); 
     return ko.bindingHandlers.foreach.update(element, newValAccess, allBindingsAccessor, viewModel, bindingContext); 
    } 
} 

我希望这可以帮助您。

Answer 3

下面是一个自定义绑定https://gist.github.com/droyad/6136446

ko.bindingHandlers.tags = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 

     var bind = function() { 
      var observable = valueAccessor(); 
      observable($(element).tagit("assignedTags").join(',')); 
     }; 

     var options = { 
      allowSpaces: true, 
      caseSensitive: false, 
      showAutocompleteOnFocus: true, 
      afterTagAdded: bind, 
      afterTagRemoved: bind 
     }; 

     var tags = allBindingsAccessor()["tagsSource"]; 
     if (tags) 
      $.extend(options, {     
       autocomplete: { source: tags, delay: 0, minLength: 0 } 
      }); 

     $(element).tagit(options); 
     $(element).data('uiTagit').tagInput.css("width", "50px"); 
    }, 
    update: function (element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     var tags = value.split(','); 
     $(element).tagit("removeAll"); 
     for (var x = 0; x < tags.length; x++) { 
      $(element).tagit("createTag", tags[x]); 
     } 
    } 
} 

Answer 4

这里是基于淘汰赛一个又一个的结合处理罗伯特瓦格纳的回答，因为我没有觉得它足够动态：

个

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

我预处理和autocompleter功能：

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>