使用变量存储挖空模板

Question

新的淘汰赛和爱好它到目前为止将700行jQuery混乱切成150行。我不喜欢的一部分是模板。我希望能够创建一个与此类似的文件

module.ViewModel.views = {
   'view1' : '<div data-bind="foreach: data">TEMPLATE</div>'
};

// in my view model set something like 
ViewModel.view1Template = module.ViewModel.views.view1;

// then in my html have
<div data-bind="template: view1Template()"></div>

如果重要的话，我希望能够用胡子做到这一点 我真的只想为我的模板添加可重用性而不是拥有它们的粉丝 直接在html中由ID引用。我想这样做的另一个原因 在我的视图文件夹中我有其他模板使用小胡子但不是淘汰赛 我想在所有JS模板中保持格式一致。

更新

以下答案似乎与我想要做的事情最接近 我的做法略有不同

for (var view in module.views){
    var node = $("<script/>", {
        "type" : "text/html",
        "id" : view,
        "text" : module.views[view]
    }).appendTo("body");
}

Answer 1

您可以动态地将元素插入到DOM中，然后应用ko绑定：

var html = $.parseHtml(module.ViewModels.views['view1'])[0];
ko.applyBindings(model, html);
$('#content').append(html);

现场演示

http://jsfiddle.net/bikeshedder/VHUcF/

---

我刚刚意识到我可能只回答了你问题的一半。遗憾的是，模板绑定处理程序只接受element id作为参数而没有元素。但是，在应用绑定之前，通过将模板添加到DOM中可以很容易地解决这个问题：

HTML

<script id="templates" type="text/html"></script>

<div id="content" data-bind="template: templates.answerList.id"></div>

的JavaScript

var templates = {
    answerList: '<ul class="answer-list" data-bind="template: { name: templates.answer.id, foreach: answers }"></ul>',
    answer: '<div class="answer" data-bind="text: text"></div>'
};

// insert templates into DOM
for (var name in templates) {
    var html = templates[name];
    var element = document.createElement('div');
    $(element).append($.parseHTML(html)[0]);
    element.id = 'tpl_' + name;
    $(element).attr('id', element.id);
    templates[name] = element;
    $('#templates').append(element);
}

answerModel = {
    answers: [
        { text: 1 },
        { text: 42 },
        { text: 667 }
    ],
    templates: templates
};

ko.applyBindings(answerModel, $('#content')[0]);

现场演示

http://jsfiddle.net/bikeshedder/VHUcF/1/

Answer 2

我想出了一个更好的解决方案来解决这个问题。在指定模板时，它不再需要您添加“.name”。

HTML

<script id="templates" type="text/html"></script>

<div id="content" data-bind="template: templates.answerList"></div>

的JavaScript

var templates = {
    answerList: 'Answers: <ul class="answer-list" data-bind="template: { name: templates.answer, foreach: answers }"></ul>',
    answer: '<li class="answer" data-bind="text: text"></li>'
};

var templateIds = {};

for (var name in templates) {
    var id = 'tpl_' + name;
    $(document.createElement('div'))
        .append($.parseHTML(templates[name]))
        .attr('id', 'tpl_' + name)
        .appendTo('#templates');
    templateIds[name] = id;
}

answerModel = {
    answers: [
        { text: 1 },
        { text: 42 },
        { text: 667 }
    ],
    templates: templateIds
};

ko.applyBindings(answerModel, $('#content')[0]);

现场演示

http://jsfiddle.net/bikeshedder/VHUcF/3/

注意

此尝试要求您将templates作为模型属性传递或在全局范围内定义templates。你也可以写"tpl_" +'，我发现它更自然。

<div data-bind="template: 'tpl_answers'"></div>

如果您不想将包含模板的script元素放在HTML中，也可以从JavaScript创建它。