Knockout.JS custom bindings. Updating foreach
<p>I'm trying to parse the object, which come from JSON file. It looks like this:</p>

<pre><code>[
{
//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
}
]
</code></pre>

<p>As you can see, I have objects, which contains "Screenshots" property. All of them will come in several language support. I mean, 5 screenshots for English, 5 or 4 for other language etc. I'm displaying this model in Javascript like this:</p>

<pre><code>    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&gt;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&gt;valueAccessor().length-1? valueAccessor()[0] : valueAccessor()[languageIndex] 
        );
        ko.applyBindingsToNode(element, {foreach: observe})
        return { controlsDescendantBindings: false};        
    }
};
</code></pre>

<p>And my HTML looks like</p>

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

<p>But I something messed up. Because it duplicates pictures. How should I be able to track the update event of <code>self.currentLanguage()</code>and according to this show new screenshots? </p>

<p>Here's the screenshot of problem:
<a href="https://i.stack.imgur.com/t0ElE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t0ElE.png" alt="knockout js problem"></a></p>