Bootstrap Tags in dynamic knockout accordion

Question

I´m having this knockout-loop:

<div id="accordion" data-bind="jqAccordion: { },template: { name: 'task-template', foreach: ¨Tasks, afterAdd: function(elem){$(elem).trigger('valueChanged');} }"></div>   

     <script type="text/html" id="task-template">
         <div data-bind="attr: {'id': 'Task' + TaskId}, click: $root.SelectedTask" class="group">
             <h3><b><span data-bind="text: TaskId"></span>: <input name="TaskName" data-bind="value: TaskName"/></b></h3>
             <p>
                 <label for="Description" >Description:</label><textarea name="Description" data-bind="value: Description"></textarea>

                 <!-- HERE I want to put the Tags for the current task -->

             </p> 
         </div>
    </script>

where self.Tasks() = ko.observableArray(); in my ViewModel, populated like this:

self.Tasks().push(new Task(data); where

Task = function( data) { 
var self=this;
self.TaskId = ko.observable(data.TaskId);
self.Description = ko.observable(data.Description);
self.TaskTags = ko.observableArray();
}

self.TaskTags is then populated later with an array of tags collected from the database and filtered with TaskId.

Outside the knockout-loop, the following markup works:

   <input type="text" name="tags" placeholder="Tags" class="tagsManager"/>
   <input type="hidden" value="Pisa, Rome" name="hiddenTagList">

with

$(function () {
                $(".tagsManager").tagsManager({
                    prefilled: ["Pisa", "Rome", "Oslo"],
                    //prefilled: viewModel.Tags().TagName,
                    CapitalizeFirstLetter: true,
                    preventSubmitOnEnter: true,
                    typeahead: true,
                    typeaheadAjaxSource: null,
                    typeaheadSource: ["Pisa", "Rome", "Milan", "Florence", "Oslo", "New York", "Paris", "Berlin", "London", "Madrid"],
                    delimeters: [44, 188, 13],
                    backspace: [8],
                    blinkBGColor_1: '#FFFF9C',
                    blinkBGColor_2: '#CDE69C',
                    hiddenTagListName: 'hiddenTagListA'
                });
            });

However the "class" must be dynamical in my loop. I reckon I can achieve this with something like:

<input type="text" placeholder="Tags" data-bind="attr: {'class': 'tagsManager' + SceneId}"  />

The question is how do I bind tagsManager to these dynamic elements?

Also: For each Task I have a self.TaskTags = ko.observableArray(/* loaded from database */);

and instead of looping over the static list of nice cities I´d like to present the tags attached to the actual task(s).

ebohlman ebohlman · Accepted Answer · 2013-09-24T12:35:38

To dynamically set classes on elements, use the css binding with an observable whose value is the class (or list of classes) to add to whatever is already statically specified as the element's class.

To bind tagsManager to elements as you create them, create a custom binding type:

ko.bindinghandlers.tagsManager={
  init: function(element) {
    $(element).tagsManager(
       ...
    );
  }
};

and then include tagsManager in the data-bind attribute for elements than need it.

Bootstrap Tags in dynamic knockout accordion

1 Answers