Cómo utilizar TagIT con nocaut

Question

estoy usando http://aehlke.github.com/tag-it/ en mi código cómo enlazar con el modelo de vista

código 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()); 

Gracias de antemano por su ayuda!

Answer 1

gracias Cedric hay necesidad de escribir Carpeta de encargo

resuelvo esta manera 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

Escribo un violín simple en su trabajo. Es un componente de construcción con una lista de etiquetas. Fiddle

Pero no es un enlace bidireccional. Si no quiere hacer eso, le aconsejo que cree una carpeta personalizada donde llame a la carpeta del modelo foreach del nocaut. See information to Custom model binders

En la función init, tiene que subscribirse a los cambios de etiquetas en knockout observableArray para actualizar el control. Y necesita suscribirse al evento TagAdded y al evento TagRemoved.

hay un código de muestra en la que extiendo el componente 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); 
    } 
} 

espero que esto ayude.

Answer 3

Aquí está atando un encargo 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

aquí hay un otro manejador de unión por nocaut basa en La respuesta de Robert Wagner, ya que no creo que sea lo suficientemente dinámica:

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

Mis preproceso y el Autocompleter funciones:

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

y el uso de html:

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