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

I've fixed your jsFiddle:

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

The example was using the old jQuery tmpl syntax which has been largely deprecated so I've updated it to use knockout native templates:

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

</script>

There was also a few syntax errors that I have fixed.

于 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 に答える