2013-04-03 8 views
5

私が使用してアプリケーションを開発しています - 1. Knockout.js 2. Knockout.js外部テンプレートエンジンを(ifandelse)、 3、サミーJS [間接的に注入器、TrafficCopのを使用して] 、Require JSなど。複数ページあたりのビューモデルとロードテンプレート非同期

モジュール性と開発の容易さを促進するため、ページあたり複数のビューモデルを使用するようにアプリケーションを設計しています。オーバーロードされたバージョンのapplyBindingを使用して複数のビューモデルをバインドする方法について説明しているRyan Niemeyer(http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html)のバインディングヒントを使用します。このテクニックは、Jim CowartのKnockout.js External Template Engineライブラリを使用することになり、テンプレートをファイルに分けて非同期にロードするのに役立ちました。それがうまくいかない理由は、特定のDOM要素にviewmodelをバインドするapplyBindingです。DOM要素が存在する必要があります(テンプレートがKO外部テンプレートエンジンによって非同期に要求され、ロードされている場合はそうではありません)。私はafterRenderなどを使うことはできません。

誰もがこのシナリオに遭遇しましたか?この点に関する提案、方向性は非常に役立ちます。私は使用できるKOのいくつかの機能が欠けていますか? HTMLテンプレートを定義しながら、今のところ

は、回避策として、私は 'templateLoaded' コールバックを追加しました:

<!--ko template: {name: 'header', templateUrl: '/templates/shell', templateLoaded: function() { header.bindViewModel.call(header) }} --> 
<!--/ko--> 

HTMLテンプレート:

<!-- ko stopBinding: true --> 
<header id="divHeader"> 
    <!-- Template Code using Header viewmodel --> 
</header> 
<!-- /ko --> 

ヘッダーのviewmodel:

bindViewModel = function() { 
    ko.applyBindings(this, $("#divHeader").get(0)); 
} 

とKnockout.jsメソッドexecuteTemplate()を次のように変更しました。

if (haveAddedNodesToParent) { 
    if (options.templateLoaded) { 
     options.templateLoaded.call(bindingContext['$data']); 
    } 

    activateBindingsOnContinuousNodeArray(renderedNodesArray, bindingContext); 
    if (options['afterRender']) 
     ko.dependencyDetection.ignore(options['afterRender'], null, [renderedNodesArray, bindingContext['$data']]); 
} 

テンプレートが非同期に取得され、解析され、DOMに読み込まれた後で、コールバックが呼び出されます。これは、viewmodelを正しい要素にバインドするのに役立ちます。私は私の仕事でMVC4であなたと同じアーキテクチャを使用してい

答えて

1

、答えはJyotindraがapplybindingsTonodeを使用して、例えば、サーバに要求を完了するとき

function loadMenu(){ 
     require('menu.js', function(menuViewmodel){ 
      ko.applyBindingsToNode(containerElement, { template: { name: 'itemTemplate', foreach: items }, menuViewmodel); 
     } 
    } 

よろしく簡単です! PS:これも見ることができますknockout.js - lazy loading of templates

+0

あなたがメニューの読み込みを終え、サーバーに要求したビューモデルにテンプレートを適用すると、交通警官のおかげで、テンプレートをサーバーに要求できますあまりにも! – deividsito

関連する問題