解决 HTML 上的 Observable 绑定问题

Question

我在 Knock Out 上创建了两个可观察变量，如下所示：

 self.winImage1= ko.observable();
 self.winImage2= ko.observable();

并为 JS 中的可观察变量验证并存储了基于平台的 CSS，如下所示：

self.findOperatingSystem = function (data) {

if (navigator.appVersion.indexOf("Win") != -1) {

    data.winImage1("window_icon_1_css");
    data.winImage2("windows_icon_2_css");
}
else if (navigator.appVersion.indexOf("Mac") != -1){

    data.winImage1("mac_icon_1_css");
    data.winImage2("mac_icon_2_css");   
    }
}

然后尝试将可观察变量作为类添加到 HTML，如下所示：

<div class="some_class1" data-bind="visible: $root.DeviceModel.findOperatingSystem ($parent)">

    <i data-bind="foreach: $data.winImage1()"></i>
    <i data-bind="foreach: $data.winImage2()"></i>  

</div>

但是使用 foreach 时出现错误。 有人请帮助确定这里做错了什么。 怀疑使用了错误的数据绑定！

请帮我解决这个问题。

Answer 1

问题是 foreach 不是这样工作的。您将需要一组可观察量来使用它，如下所示：

self.itemsArray = [ko.observable({ id: 1, name: 'image1'}), ko.observable({id:2, name:'image2'})];
self.winImages = ko.observableArray(itemsArray );



<div class="some_class1" data-bind="visible: $root.DeviceModel.findOperatingSystem($parent), foreach: winImages ">
<i data-bind="attr: { id: $data.id}"></i>