Knockout.JSカスタムバインディング。 foreachの更新

Question

私はJSONファイルから来たオブジェクトを解析しようとしています。それは次のようになります。

[ 
{ 
//Rest of data 
    "Screenshots": 
    [ 
     ["wp_ss_20160408_0001.png","wp_ss_20160408_0002.png","wp_ss_20160408_0003.png"] 
    ] 
//Rest of data 
}, 
{ 
//Rest of data 
    "Screenshots": 
    [ 
     ["wp_ss_20160414_0027.png","wp_ss_20160414_0028.png","wp_ss_20160414_0029.png"] 
    ] 
//Rest of data 
}, 
{ 
//Rest of data 
    "Screenshots": 
    [ 
     ["wp_ss_20160410_0002.png","wp_ss_20160410_0003.png","wp_ss_20160410_0004.png"], 
     ["", 
     "", 
     ""] 
    ] 
//Rest of data 
} 
] 

あなたが見ることができるように、私は、「スクリーンショット」プロパティが含まれている、オブジェクトを持っています。それらのすべては、いくつかの言語サポートで来るでしょう。

ko.bindingHandlers.getLocalizedScreenshot = 
{ 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) 
    { 
     ko.cleanNode(element);   
     var observe = ko.observableArray(); 
     var languageIndex = self.displayLanguages.indexOf(self.currentLanguage()); 
     observe 
     (
      languageIndex>valueAccessor().length-1? valueAccessor()[0] : valueAccessor()[languageIndex] 
     ); 
     ko.applyBindingsToNode(element, {foreach: observe}) 
     return { controlsDescendantBindings: true };    
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) 
    { 
     ko.cleanNode(element); 
     var observe = ko.observableArray(); 
     var languageIndex = self.displayLanguages.indexOf(self.currentLanguage()); 
     observe 
     (
      languageIndex>valueAccessor().length-1? valueAccessor()[0] : valueAccessor()[languageIndex] 
     ); 
     ko.applyBindingsToNode(element, {foreach: observe}) 
     return { controlsDescendantBindings: false};   
    } 
}; 

そして、私のHTMLは

<!--Rest of markup --> 
     <div class="screenshots" data-bind="getLocalizedScreenshot:Screenshots"> 
      <div class="holderImg"> 
       <img data-bind="attr:{src:'images/projects/'+$data}" alt="image"> 
       <div class="increaseSize"> 
        <div class="zoomHolder"> 
         <img src="images/zoom.png" alt="images/zoom.png"> 
         <div>Zoom</div>     
        </div> 
       </div> 
      </div> 
     </div> 
<!-- Rest of markup --> 

のように見えます。しかし、私は何かをめちゃめちゃ：私は、私はこのようにJavaScriptでこのモデルを表示しています、英語のための5つのスクリーンショット、他の言語などのために5または4を意味しますアップ。それは写真を複製するためです。 self.currentLanguage()の更新イベントを追跡するにはどうすればよいですか？また、この新しいスクリーンショットを表示するにはどうすればよいですか？ここで

は、問題のスクリーンショットです：

Answer 1

私は解決策を見つけました。組み込みのforeach更新メソッドを使用してください：

ko.bindingHandlers.getLocalizedScreenshot = 
{ 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) 
    { 
     var languageIndex = self.displayLanguages.indexOf(self.currentLanguage()); 
     var array = ko.observableArray(languageIndex>valueAccessor().length-1? valueAccessor()[0] : valueAccessor()[languageIndex] , allBindingsAccessor);    
     return ko.bindingHandlers.foreach.init(element, array, allBindingsAccessor, viewModel, bindingContext); 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) 
    { 
     var languageIndex = self.displayLanguages.indexOf(self.currentLanguage()); 
     var array = ko.observableArray(languageIndex>valueAccessor().length-1? valueAccessor()[0] : valueAccessor()[languageIndex] , allBindingsAccessor); 
     ko.bindingHandlers.foreach.update(element, array , allBindingsAccessor, viewModel, bindingContext); 
     return { controlsDescendantBindings: true };  
    } 
};