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 
} 
] 

正如你所看到的，我有對象，其中包含「屏幕截圖」屬性。他們都會有幾種語言支持。我的意思是，5個截圖英語，5或4個其他語言等。我在Javascript中顯示該模型是這樣的：

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 --> 

但我的東西弄亂向上。因爲它複製圖片。我應該如何跟蹤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 };  
    } 
};