Question

我正在尝试通过MIX的Duncan McKenzie的knockout.js教程，并且有一点你在每个语句中使用JQuery模板 - 这里是

<script id="friendsTemplate" type="text/x-jquery-tmpl">
    <ul>
        {{each(index, friend) friends}}
         <li>${ friend.name }</li>
        {{/each}}
    </ul>
</script>

当我尝试重新创建它时，它只会从无序列表标签内打印一次原始文本，就是这样。即

{{each(index, friend) friends}}
    <li>${ friend.name }</li>
{{/each}}

我想也许我没有正确引用模板文件所以我把它添加到我的页面（从一个例子中找到了JQuery站点）。

 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

我不是一个HTML / JQuery的人，所以很抱歉，如果这很简单，但我一直试图修复这个半小时 - 我不知道问题是什么。

谢谢！

Answer 1

您似乎没有在另一个脚本标记中调用tmpl函数。查看jQuery插件页面上的示例。

{{each}}模板标记 http://api.jquery.com/template-tag-each/

您可能需要添加类似的内容......

<script>
var friends = [
    { Name: "Mike", Languages: ["French"] },
    { Name: "Bill", Languages: [] }
];
$( "#friendsTemplate" ).tmpl( friends )
    .appendTo( "#friendsList" );
</script>

Answer 2

实际上有几个问题在这里发生。首先，我的标签顺序错了。淘汰图书馆需要持久。然后我需要获得正确版本的JQuery模板库。以下是脚本标记中包含的结果。

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="~/Scripts/knockout-2.0.0.js" type="text/javascript"></script>

拉里的答案在其他情况下是正确的，但是我怀疑knockout.js正在为我照顾那部分，事实上似乎就是这样。一旦我得到脚本标签，一切正常。这是完成的代码，您可以创建一个新的MVC应用程序并将其粘贴到家庭控制器中。

@{
    ViewBag.Title = "Home Page";
}

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="~/Scripts/knockout-2.0.0.js" type="text/javascript"></script>

<h3>Details</h3>

<p>First Name: <input data-bind="value: firstName"/> </p>
<p>Last Name: <input data-bind="value: lastName"/> </p>
<p>Name: <span data-bind="text: fullName"/> </p>

<h2>Friends</h2>
<div data-bind="template: 'friendsTemplate'"></div>

<script id="friendsTemplate" type="text/html">
    <ul>
        {{each friends}}
         <li>${ name }</li>
        {{/each}}
    </ul>
</script>


<script type="text/javascript">
    function Friend(name) {
        return {
            name: ko.observable(name)
        };
    }

    var viewmodel = {
        firstName: ko.observable("bert"),
        lastName: ko.observable("bert"),
        friends: ko.observableArray([new Friend("Ralphie"), new Friend("Waldo")])
    };

    viewmodel.fullName = ko.dependentObservable(function () {
        return this.firstName() + " " + this.lastName();
    }, viewmodel);

    ko.applyBindings(viewmodel);
</script>

我在淘汰赛网站上找到了这个文档。 http://knockoutjs.com/documentation/template-binding.html请参阅注释5“使用jQuery.tmpl，一个基于字符串的外部模板引擎”我应该在昨晚找到它。

谢谢！肯

JQuery模板不处理 - 只是吐出原始文本

2 个答案: