动态淘汰手风琴中的引导标签答案

【问题标题】：Bootstrap Tags in dynamic knockout accordion动态淘汰手风琴中的引导标签
【发布时间】：2013-09-29 11:17:02
【问题描述】：

我有这个淘汰赛循环：

<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>

在哪里 self.Tasks() = ko.observableArray(); 在我的 ViewModel 中，填充如下：

self.Tasks().push(new Task(data); 在哪里

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

self.TaskTags 稍后会使用从数据库中收集并使用 TaskId 过滤的标签数组填充。

在淘汰赛循环之外，以下标记起作用：

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

与

$(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'
                });
            });

但是，“类”在我的循环中必须是动态的。我认为我可以通过以下方式实现这一目标：

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

问题是如何将 tagsManager 绑定到这些动态元素？

另外：对于每个任务我都有一个 self.TaskTags = ko.observableArray(/* 从数据库加载 */);

而不是循环访问漂亮城市的静态列表，我想展示附加到实际任务的标签。

【问题讨论】：

标签： javascript jquery twitter-bootstrap knockout.js

【解决方案1】：

要在元素上动态设置类，请将 css 绑定与一个其值是类（或类列表）的可观察对象添加到已静态指定为元素类的任何内容中。

要在创建元素时将tagsManager 绑定到元素，请创建自定义绑定类型：

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

然后将tagsManager 包含在data-bind 属性中以获取不需要的元素。

【讨论】：