使用变量存储基因剔除模板 [英] Using a variable to store a knockout template

问题描述

到目前为止，淘汰和热爱它的新手已将700行的jQuery混乱削减为150行.我不太喜欢的一部分是模板.我希望能够创建与此类似的文件

New to knockout and loving it so far cut a 700 line jQuery mess into 150 lines. The one part I am not really liking is the templating. I want to be able to create a file similar to this

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引用.我想这样做的另一个原因 在我的views文件夹中，我还有其他使用胡须但不使用剔除的模板 希望在所有JS模板中保持一致的格式.

I would like to be able to do this possibly with mustache if that matters but really I just want to add reusability to my templates not a fan of having them referenced by IDs directly in the html. The other reason I would like to do this is in my views folder I have other templates that use mustache but not knockout would like to keep my formatting consistent across all JS templates.

以下答案似乎是目前与我想做的最接近的事情 我做了一点不同

The answer below seems like currently the closest thing to what I want to do I did it slightly different

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

推荐答案

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

You can insert the elements into the DOM dynamically and apply the ko binding afterwards:

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

现场演示

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

我刚刚意识到，我可能只回答了您一半的问题.遗憾的是，模板绑定处理程序仅接受element id作为参数，不接受任何元素.但是，通过在应用绑定之前将模板添加到DOM可以轻松解决此问题:

I just realized that I might have answered only half of your question. Sadly the template binding handler only accepts an element id as argument and no elements. This however is easy to fix by adding the templates to the DOM before applying the bindings:

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

这篇关于使用变量存储基因剔除模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！