Knockout.js 使用变量存储淘汰模板

新加入knockout并热爱它，迄今为止，将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>

module.ViewModel.views={
“视图1”：“模板”
};
//在我看来，模型设置如下
ViewModel.view1Template=module.ViewModel.views.view1；
//然后在我的html中

我希望能够做到这一点，可能与胡子，如果这是重要的，但 实际上，我只是想给我的模板增加可重用性，而不是一个拥有它们的粉丝 由ID直接在html中引用。我想这样做的另一个原因 在“我的视图”文件夹中，我有其他使用小胡子但不使用敲除的模板 希望在所有JS模板中保持格式一致

更新 下面的答案似乎是目前最接近我想要做的事情 我做的有点不同

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

for（module.views中的变量视图）{
变量节点=$（“”{
“类型”：“文本/html”，
“id”：视图，
“文本”：模块视图[视图]
}).附于（“主体”）；
}

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

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

现场演示

---

我刚刚意识到我可能只回答了你问题的一半。遗憾的是，模板绑定处理程序只接受

元素id

作为参数，而不接受任何元素。但是，通过在应用绑定之前将模板添加到DOM，可以很容易地解决这一问题：

HTML

JavaScript

var模板={
answerList:“
”，
答复：''
};
//将模板插入DOM
for（模板中的变量名称）{
var html=模板[名称]；
var-element=document.createElement（'div'）；
$（元素）.append（$.parseHTML（html）[0]）；
element.id='tpl_'+名称；
$（element.attr（'id'，element.id））；
模板[名称]=元素；
$（“#模板”）.append（元素）；
}
回答模型={
答复:[
{文本：1}，
{文本：42}，
{文本：667}
],
模板：模板
};
ko.applyBindings（answerModel，$（#content'）[0]）；

现场演示

---

我刚刚想出了一个更好的解决这个问题的办法。指定模板时不再需要添加“.name”

HTML 如果不想将包含模板的

script

元素放入HTML中，也可以从JavaScript创建它

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

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

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]);

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

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

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]);

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