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

【问题标题】：Knockout- How to check if item in the loop exist while binding淘汰赛-如何在绑定时检查循环中的项目是否存在
【发布时间】：2015-06-04 06:46:44
【问题描述】：

我在 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/

【问题讨论】：

尝试在此处添加$data 示例jsfiddle.net/supercool/utdAm/207。欢呼

标签： jquery knockout.js

【解决方案1】：

如果您的某些项目不具备所有属性，您可以使用foreach 中的$data 属性安全地访问它们。

在这种情况下，如果缺少属性，绑定仍然可以工作，只是不会显示任何内容：

<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

【讨论】：