Làm thế nào để sử dụng tagit với loại trực tiếp

Question

tôi đang sử dụng http://aehlke.github.com/tag-it/ trong mã của tôi cách để ràng buộc với viewmodel

HTML code

<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()); 

Cảm ơn trước sự giúp đỡ của bạn!

Answer 1

nhờ Cedric không cần phải viết tùy chỉnh chất kết dính

tôi giải quyết theo cách này 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

Tôi viết một câu đố đơn giản khi nó hoạt động. Nó xây dựng thành phần với danh sách de tag. Fiddle

Nhưng đó không phải là hai cách ràng buộc. Nếu bạn không thể làm điều đó, tôi khuyên bạn nên tạo một chất kết dính tùy chỉnh, nơi nó gọi là chất kết dính mô hình forout loại trực tiếp. See information to Custom model binders

Trên chức năng init, bạn cần phải thay đổi thành các thay đổi thẻ trong Observatory ObservableArray để cập nhật điều khiển. Và bạn cần đăng ký sự kiện onTagAdded và sự kiện onTagRemoved.

Có một mã mẫu nơi tôi mở rộng thành phần 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); 
    } 
} 

Tôi hy vọng điều này giúp bạn.

Answer 3

Dưới đây là một phong tục ràng buộc 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

Dưới đây là một khác xử lý bắt buộc đối với loại trực tiếp dựa trên Câu trả lời của Robert Wagner, vì tôi không cảm thấy rằng nó đủ năng động:

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

My preprocess và autocompleter chức năng:

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("#", ''); 
}; 

Và sử dụng trong html:

<ul data-bind="tagit:{tags:Tags, autocomplete:{source:TagAutocompleter, delay:250, minLength: 2}, options:{preprocessTag: TagProcessor}}"> 
</ul>