私はこのノックアウトループを持っています:
<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(新しいタスク(データ);
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(/* データベースからロードされた */); があります。
素敵な都市の静的リストをループする代わりに、実際のタスクに付けられたタグを表示したいと思います。