Question

我在HTML下面，我用一个foreach数据绑定绑定我的数组。

<table>
<tr>
    <th>index</th>
    <th>fajr</th>
    <th>zuhr</th>
    <th>asr</th>
    <th>maghrib</th>
    <th>isha</th>
</tr>
<tbody data-bind="foreach: prayerData">
    <tr>
        <td data-bind="text: index"></td>  <!-- Display the current row -->
        <td data-bind="text: fajr"></td>
        <td data-bind="text: zuhr"></td>
        <td data-bind="text: asr"></td>
        <td data-bind="text: maghrib"></td>
        <td data-bind="text: isha"></td>
    </tr>
</tbody>
</table>

这就是我准备我的视图模型以绑定到上面的HTML -

var dataFromServer = {
"1": {
    "asr": "15:50",
    "fajr": "03:00",
    "isha": "21:31",
    "maghrib": "19:02",
    "zuhr": "12:21"
},
"2": {
    "asr": "15:51",
    "fajr": "02:55",
    "isha": "21:35",
    "maghrib": "19:04",
    "zuhr": "12:21"
},
"3": {
    "asr": "15:53",
    "fajr": "02:51",
    "isha": "21:39",
    "maghrib": "19:07",
    "zuhr": "12:21"
},
"4": {
    "asr": "15:54",
    "fajr": "02:46",
    "isha": "21:42",
    "maghrib": "19:09",
    "zuhr": "12:20"
}
};



var ViewModel = function(data) {

//map data to an array
var mappedToArray = [];
$.each(data, function(index, item) {
    mappedToArray.push(item);
    item.index = index;
});

this.prayerData = ko.observableArray(mappedToArray);          
};

ko.applyBindings(new ViewModel(dataFromServer));

在绑定foreach绑定中的任何项之前，首先我要检查数组中的该项是否存在。像下面的东西 -

例如，如果dataFromServer [0]看起来像下面的东西，它缺少“asr”和“fajr”，那么在绑定时会产生错误。

"1": {    
"isha": "21:31",
"maghrib": "19:02",
"zuhr": "12:21"

}，

Jsfiddle也是如此

http://jsfiddle.net/rniemeyer/utdAm/

Answer 1

如果您的某些商品没有所有属性，则可以使用$data中的foreach属性安全访问它们。

在这种情况下，如果缺少属性，绑定仍然有效，它将不会显示任何内容：

<tbody data-bind="foreach: prayerData">
    <tr>
        <td data-bind="text: index"></td>  <!-- Display the current row -->
        <td data-bind="text: $data.fajr"></td>
        <td data-bind="text: $data.zuhr"></td>
        <td data-bind="text: $data.asr"></td>
        <td data-bind="text: $data.maghrib"></td>
        <td data-bind="text: $data.isha"></td>
    </tr>
</tbody>

演示JSFiddle。

如果属性缺失，您甚至可以在绑定中提供默认值：

<td data-bind="text: $data.fajr || 'no fajr property'"></td>

演示JSFiddle

淘汰赛 - 如何在绑定时检查循环中的项目是否存在

1 个答案: