Question

我正在尝试使用Knockout.js将HTML文档上的HTML视图与存储在数据库表中的HTML代码合并。虽然看起来数据库中的代码已正确附加到DOM，但是淘汰表示它无法找到该ID。

我的viewmodel具有以下属性：

var viewModel = {
    Index: ko.observable(),
    Right: ko.observable(),
    Process: ko.observable(),
    Visual: ko.observable(),
    Data: ko.observable(),
    TemplateID: ko.observable(),
    FormID: ko.observable()
};

visual是具有名为“Control”的属性的对象，它是HTML代码的一部分。比方说，我从我的数据库下载的代码是：

<form id="FormID">
     <input type="text" id="Name" name="Name" />
     <input type="text" id="Description" name="Description" />
</form>

我在HTML文档上的HTML视图如下所示：

<div class="content" id="content" data-bind="with: chosenProcess">
    <div class="toolbar">
        <img class="search" title="Search" data-bind="visible: Rights.AllowRead" />
        <img class="add" title="Add" data-bind="visible: Rights.AllowCreate, 
            click: $root.loadControl" />
        <img class="save" title="Save" data-bind="visible: Rights.AllowUpdate, 
            click: $root.commitProcess" />
        <img class="close" title="Close" data-bind="click: $root.stopProcess" />
        <img class="delete" title="Delete" data-bind="visible: Rights.AllowDelete, 
            click: $root.stopProcess" />
    </div>
    <div data-bind="template: { name: TemplateID, data: Data }"></div>
</div>

目标是设置selectedProcess，这将创建以下HTML：

<div class="content" id="content" data-bind="with: chosenProcess">
    <div class="toolbar">
        <img class="save" title="Save" data-bind="visible: Rights.AllowUpdate, 
            click: $root.commitProcess" />
        <img class="close" title="Close" data-bind="click: $root.stopProcess" />
    </div>
    <form id="frmPOST-1-1-1">
        <input type="text" id="Name" name="Name" />
        <input type="text" id="Description" name="Description" />
    </form>
</div>

在文档（http://knockoutjs.com/documentation/template-binding.html）上看到示例后，我尝试将Visual.Control包装在标记周围，将其附加到“content”元素但是knockout无法找到它。我可以使用document.getElementByID找到它。

我做错了什么？

感谢您的帮助！

P.S。：在任何负面评论之前，我上周刚开始使用淘汰赛......

Answer 1

据我所知，你还没有定义淘汰模板。也就是说，对于您要完成的任务，您不需要使用模板绑定。您可以使用knockout的HTML绑定来呈现您已获取的HTML内容。

<div data-bind="html: Data"></div>

...假设Data是您从数据库中检索的字段的名称。

这是演示HTML绑定的快速小提琴：

http://jsfiddle.net/krainey/6sFVK/3/

如果您在此之后仍有问题：

验证视图模型中的数据是否符合您的期望
确认您正在为viewmodel调用applybindings

你可能会发现通过knockout.js教程很有用 - 它们很好地涵盖了基础知识。

http://learn.knockoutjs.com/

Answer 2

最好的方法是创建外部模板源

http://www.knockmeout.net/2011/10/ko-13-preview-part-3-template-sources.html

编辑：

以下是有关如何实施模板源

的示例

https://github.com/AndersMalmgren/Knockout.Combobox/blob/master/src/knockout.combobox.js#L356

如果你想让它成为KO的默认模板源，你可以

ko.setTemplateEngine(stringTemplateEngine);

另外，看看我制作的这个.NET模板商店

https://github.com/AndersMalmgren/Knockout.Bootstrap.TemplateStore/wiki

找不到带ID的模板

2 个答案: