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

正如你所看到的，我有对象，其中包含＆＃34;截图＆＃34;属性。所有这些都将提供多种语言支持。我的意思是，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更新方法：

tuple

Knockout.JS自定义绑定。更新foreach

1 个答案: