Question

我输入了此视频的代码示例： http://channel9.msdn.com/Events/MIX/MIX11/FRM08

但这不起作用。错字或其他错误在哪里？我的源副本位于http://jsfiddle.net/fFedK/

HTML：

<span data-bind="text:firstName"></span><br /><br />
<input data-bind="value:firstName, valueUpdate: 'afterkeydown'" /><br /><br />

<span data-bind="text:lastName"></span><br /><br /><br />
<input data-bind="value:lastName, valueUpdate: 'afterkeydown'" /><br /><br />

<span data-bind="text:fullName"></span><br /><br />

<h2>Friends</h2>

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

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

    </ul>

</script>

脚本代码：

function friend(name) {
    return {
        name: ko.observable(name)
    }
}


var viewModel = {
    firstName : ko.observable("Mike"),
    lastName : ko.observable("Rassel"),

    friends : ko.observableArray([new friend("Steve"), new friend("Annie")])
}

//viewModel.fullName = ko.computed(function () { return this.firstName() + " " + this.lastName(); }, viewModel);





ko.applyBindings(viewModel);

Answer 1

我修复了你的jsFiddle：

http://jsfiddle.net/qHhEV/4/

该示例使用了旧的jQuery tmpl语法，该语法已被大量弃用，因此我更新了它以使用knockout本机模板：

<script id="friendsTemplate" type="text/html">
    <ul>
        <!-- ko foreach: friends -->
        <li data-bind="text: name"></li>     
        <!-- /ko -->
    </ul>

</script>

我还修复了一些语法错误。

Answer 2

该示例依赖于jquery和jquery-tmpl库。

因此您的页面必须按以下顺序加载js库： 1. Jquery 2. Jquery-tmpl 3. Knockout.js

我已经将以下小提琴联系起来了。无需更改代码：JsFiddle

但是，正如另一个答案所指出的那样，应该使用更新的模板机制。 jquery-tmpl库已不再开发。

您可以将模板与foreach绑定一起使用。总的来说，我认为这更简洁：JsFiddle

<ul data-bind="foreach: friends">
    <li data-bind="text: name"></li>
</ul>

MIX 11淘汰代码示例和我的错误

2 个答案: