2012-01-04 19 views
2

KnockoutJs 2にアップグレードし、テンプレートバインディングを使用するページが機能しなくなったことがわかりました。

私は${ x }バインディングを使用するテンプレートバインディングを持っていますが、これらは解決されていません。

テンプレートを削除して新しいコントロールフローバインディングを使用しましたが、それでも機能しませんでした。代わりにデータバインドを使用するように変換する必要がありました。

すべてを変換する必要はありません。jqueryテンプレートと下位互換性があり、新しいコントロールフローバインディングを使用する可能性があります。

どのようにすればよいでしょうか?

+0

まだjQuery tmplライブラリへの参照はありますか?私はKO2とtmplを一緒に使っています。過去に問題を引き起こしていることがわかったので、tmpl構文と一緒にノックアウトのネイティブテンプレート構文を少し使用していないことを確認してください。 –

答えて

2

jQueryテンプレートを使用している場合、Knockout 2.0には特定のバージョンが必要です。ノックアウトのページから、ここで注意を参照してください:http://blog.stevensanderson.com/2011/08/31/knockout-1-3-0-beta-available/

「の下位互換性ノート」の下で述べたようにスティーブサンダーソンは、...

に言及しているあなたは jQueryのテンプレートを使用している場合、あなたはそれを更新する必要があります2.0.0 KOとしてリリースされたKOの1.3betaが終わったことを https://github.com/jquery/jquery-tmpl

  • ノートで見られるよう1.0.0pre

jQueryテンプレートを使用する予定がない場合は、コードのjsFiddleを投稿してください。問題の解決に役立てることができます。

[UPDATE] さらなるコメントで、テンプレートの作成方法について質問しました。ここでKO 2.0.0用のネイティブテンプレートを使用ノックアウトサイトhttp://knockoutjs.com/documentation/template-binding.html)上の例から取られた2つの可能性がある

<h2>Participants</h2> 
Here are the participants: 
<div data-bind="template: { name: 'person-template', foreach: people }"></div> 

<script type="text/html" id="person-template"> 
    <h3 data-bind="text: name"></h3> 
    <p>Credits: <span data-bind="text: credits"></span></p> 
</script> 

function MyViewModel() { 
    this.people = [ 
     { name: 'Franklin', credits: 250 }, 
     { name: 'Mario', credits: 5800 } 
    ] 
} 
ko.applyBindings(new MyViewModel()); 

これは、あなたが使用する要素のforeach、すなわち内部で直接匿名テンプレートを埋め込むと同じ結果を与えます:

<div data-bind="foreach: people"> 
    <h3 data-bind="text: name"></h3> 
    <p>Credits: <span data-bind="text: credits"></span></p> 
</div> 
+0

Perhapdでは、文字列オブジェクトの配列をバインドするときに、ネイティブ 'KO2'テンプレートを使用する方法を知っています。フィールドの名前を付けていないので、' data-bind = "... ???" ?だから、私は 'foreach:names'を実行しています。ここでは、文字列の配列、テンプレート本体の各文字列をバインドする方法は? '$ parent/$ root'は非常に役に立ちます。ネイティブバインディングを使用して親ViewModelにアクセスする方法は? – sll

+0

@sll - あなたのコメントを見ました。文字列配列をループするとき、$ dataを使って現在の項目にアクセスすることができます。これはそれぞれのケースの名前です。 –

+0

回答ありがとうジョン!! – sll

1

jquery.tmplは使用しないでください。これは水中プロジェクトで、これ以上発展させることはありません。 "$ {x}"はjquery.tmplです

ノックアウト2.0では、独自のネイティブテンプレートライブラリを使用しています。それを使用してください。それは "$ {x}"と下位互換性がありませんが、Knockoutがメジャーバージョンのアップグレード(1.2から2.0)に変更された理由です。

+0

OK、私は実際にこのルートを進めるかもしれないと思う。これは、すべての$ {}を通常のデータバインド式に変更する必要があることを意味しますか? – jaffa

+0

jQueryテンプレートを削除すると、yesになります。その場合、ネイティブテンプレートを使用します。上記の私の答えを編集して、ネイティブテンプレートの2つの例とドキュメントへのリンクを示しました。 –

+0

Perhapdは、文字列オブジェクトの配列をバインドするときにネイティブ 'KO2'テンプレートを使用する方法を知っています。フィールドの名前を付けていないので、' data-bind = "... ???" ?だから、私は 'foreach:names'を実行しています。ここでは、文字列の配列、テンプレート本体の各文字列をバインドする方法は? '$ parent/$ root'は非常に役に立ちます。ネイティブバインディングを使用して親ViewModelにアクセスする方法は? – sll

関連する問題