javascript - 绑定(bind) observableArray 中未定义的字段或提供默认值

Question

问题是什么

假设我想对 MongoDB 进行查询并将结果显示在表中。有些文档的字段比其他文档多或少——这对我来说很好。但我在客户端遇到了问题。

我使用“mongoose”和模型来通过 NodeJS 检索数据，然后在客户端上，我使用“knockout.js”将列表绑定(bind)到表。现在这就是问题发生的地方 - 一旦任何字段不存在，但绑定(bind)在表中，KO 就会抛出异常并停止处理。

我尝试了什么

• 我尝试在 Mongoose 模型上定义默认值，但这不会添加不存在的字段。此外，它还会增加线路上的有效负载；-(

• 我尝试了“knockout.punches”和“默认”文本过滤器，它工作正常，但仅当值为 null 或空时。未定义仍然会引发异常。

• 我尝试了多种方法来使用 KO 的扩展机制，但要么我必须在绑定(bind)中编写有线语法，要么它也不适用于未定义。

• 到目前为止我还没有尝试过的另一种可能性是在客户端上创建一个模型，然后将其映射到响应 - 老实说，我只是不想这样做，因为在大多数情况下，数据结构来自数据库完全没问题，只是意味着额外的努力。

我在寻找什么

有没有人有解决方案，可以自动将 Mongoose 模型中缺少的字段添加到响应中，或者让它运行，以便 KO 不会停止对未定义字段的处理(是否可能有一些参数)。就我而言，它是一个 observableArray，这里的大多数解决方法和解决方案都涉及单个字段。对于具有未定义字段的列表的解决方案非常有趣。

谢谢

[{"firstname":"Foo", "lastname":"Bar"},{"firstname":"John"}];

self.allUsers = ko.observableArray();

self.onResponseAllUsers = function (response) {
            if (response && response.length > 0) {                
                self.allUsers(response);
            }
        };

<tbody data-bind="foreach: allUsers">
<tr>
<td data-bind="text: firstname"></td>                           
<td data-bind="text: lastname"></td>   <<<< This is undefined for one row, and KO stops processing.
</tr>
</tbody>

Answer 1

有两种方法可以解决这个问题。

1. 您可以使用||在绑定(bind)中为缺少属性的情况提供默认值，因此绑定(bind)将如下所示:-

   <tbody data-bind="foreach: allUsers">
      <tr>
       <td data-bind="text: $data.firstname"></td>
       <td data-bind="text: $data.lastname || 'NA'"></td> // used $data context property
      </tr>
   </tbody>
   

   Fiddle Demo

2. 您可以迭代所有记录以检查是否缺少任何属性，如果缺少某些内容，您可以提供一些默认值。

   function User(item) {
     this.firstname = item.firstname || "NA";
     this.lastname = item.lastname || "NA";
   }
   var viewmodel = function (data) {
     var self = this;
     self.allUsers = ko.observableArray();
     self.onResponseAllUsers = function (response) {
     if (response && response.length > 0) {
        ko.utils.arrayForEach(response, function (item) {
           self.allUsers.push(new User(item));
        });
     }
    };
     self.onResponseAllUsers(data);
   }
   

   Fiddle Demo