0

我从这个视频中输入代码示例：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);
4

2 回答 2

2

我已经修复了你的 jsFiddle：

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

该示例使用的是旧的 jQuery tmpl 语法，该语法已被大量弃用，因此我对其进行了更新以使用淘汰本机模板：

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

</script>

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

于 2012-05-18T10:04:43.857 回答
1

该示例依赖于 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>
于 2012-05-18T10:07:17.923 回答