2016-06-16 6 views
0

私のWebアプリケーションでは、2つのタブがあり、どちらもカス​​タムノックアウトコンポーネントです。可視性は次の構文で制御されます。ノックアウトコンポーネントでバインディングを1回適用する

<div id="page" data-bind="component: { name: currentTab }"></div> 

ここで、currentTabは現在のタブの名前で観測可能です。

いずれのタブでも、カスタムバインディングを使用してD3.jsで視覚化しています。問題は、これらのカスタムバインディングがタブを開いた後に再初期化されることです。それらを一度ロードして再描画する必要がないようにする方法はありますか?

それらが使用して作成された、コンポーネントののviewmodelsは、再初期化されていないことに注意してください{インスタンス:新しいViewModelに()}トリック:

define(['knockout', 'text!./tab-one.html', 'jquery'], function(ko, template, $) { 

    function ViewModel() { 
     var self = this; 
    }; 

    return { 
     viewModel: { instance: new ViewModel() }, 
     template: template 
    }; 
}); 

答えて

0

あなたは少しあなたのアプローチを変更する必要があります。

<div id="page"> 
    <div id="tab-1" data-bind="visible: (currentTab() == 'drawing-1'), component:{name:'drawing-1'}"></div> 
    <div id="tab-2" data-bind="visible: (currentTab() == 'drawing-2'), component:{name:'drawing-2'}"></div> 
</div> 

たとえば、コンポーネントの内部に可視性のロジックをカプセル化するなど、ビューモデルを提供すると、コンポーネントにさらに柔軟性を与えることができます。さらに、コンポーネントの初期化時に最初に再描画をスキップすることもできます:

これはあくまでも一例ですが、あなたのアイデア見ることができます:

ko.components.register('drawing', { 
    viewModel: function(params) { 
     // Behaviors 
     this.active1 = params.currentTab == 'drawing-1'; 
     this.active2 = params.currentTab == 'drawing-2'; 
     this.draw = ko.computed(function() { 
      if (!ko.computedContext.isInitial()) { 
       // do some changes to the drawing 
      } 
     }); 
    }, 
    template: 
     '<div data-bind="visible: active1">'+ 
      // drawing 1 
     '</div>'+ 
     '<div data-bind="visible: active2">'+ 
      // drawing 2 
     '</div>' 
}); 
関連する問題