从微风/敲除表中删除会产生“无法读取属性‘BoardName’为空”答案

【问题标题】：Deleting from breeze/knockout table produces "Cannot read property 'BoardName' of null"从微风/敲除表中删除会产生“无法读取属性‘BoardName’为空”
【发布时间】：2014-07-17 00:21:59
【问题描述】：

我一直在使用简单而干净的访问来删除从微风数据服务填充的表中的项目。一切都很好，直到我开始在显示的表格中包含导航属性。现在每当我使用删除功能时，我都会收到Uncaught TypeError: Cannot read property 'BoardName' of null 的错误。

我的数据库实体设置为：

public class SpecificAdapter
{
    public int Id { get; set; }
    public string PbaNumber { get; set; }
    public int NumberOfPorts { get; set; }

    public int AdapterId { get; set; }
    public virtual Adapter Adapter { get; set; }
}

public class Adapter
{
    public int Id { get; set; }
    public string BoardName { get; set; }
    public string DeviceId { get; set; }

    public virtual ICollection<SpecificAdapter> SpecificAdapters { get; set; }
}

我以这种方式在 Breezejs 中使用数据服务库：

var loadSpecificAdaptersTable = function () {
    return em.executeQuery(breeze.EntityQuery.from('SpecificAdapters').expand('Adapter'));
};

像这样加载到视图模型中：

adaptersDataService.loadSpecificAdaptersTable()
    .then(function (data) { specificAdapters(data.results); })
    .fail(function (error) { logger.error(error.message, "loadSpecificAdaptersTable failed during initialization"); });

我像这样在 html 中映射它：

<table class="table tablesorter">
    <thead>
        <tr>
            <th data-bind="sort: {arr: specificAdapters, prop: 'Adapter().BoardName'}">Board Name</th>
            <th data-bind="sort: {arr: specificAdapters, prop: 'PbaNumber'}">Pba Number</th>
            <th data-bind="sort: {arr: specificAdapters, prop: 'NumberOfPorts'}"># Ports</th>
            <th data-bind="sort: {arr: specificAdapters, prop: 'FirmwareVersion'}">Firmware Version</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: specificAdapters">
        <tr>
            <td data-bind="text: Adapter().BoardName"></td>
            <td data-bind="text: PbaNumber"></td>
            <td data-bind="text: NumberOfPorts"></td>
            <td data-bind="text: FirmwareVersion"></td>
            <td>
                <button data-bind="click: $parent.editSpecificAdapter" class="btn">Edit</button>
            </td>
            <td>
                <button data-bind="click: $parent.deleteSpecificAdapter" class="btn">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

在Adapter().BoardName 被添加为表中的引用之前，我可以单击删除按钮，一切正常。现在我得到一个错误。删除逻辑如下：

var deleteSpecificAdapter = function (item) {
    item.entityAspect.setDeleted();
    specificAdapters.remove(item);
};

item.entityAspect.setDeleted(); 运行时抛出错误。将数据绑定添加到Adapter().BoardName 是否会更改item 变量的映射方式不足以很好地使用？我是否需要有不同的逻辑来确定实际项目，还是需要以不同的方式绑定点击事件才能从 foreach 获取特定的、未重新映射的项目？

【问题讨论】：

标签： javascript html knockout.js breeze

【解决方案1】：

以您的方式绑定到 BoardName 会造成时间问题。由于值在父上下文完全更新之前被清除，因此会引发错误。有几种方法可以解决这个问题 -

<td data-bind="with: Adapter"><span data-bind="text: BoardName"></span></td>

这只会在填充适配器时绑定到 BoardName 属性

<td data-bind="if: Adapter"><span data-bind="text: BoardName"></span></td>

这只会在 Adapter 有值时评估内部跨度的数据绑定。

【讨论】：