javascript - KnockoutJS 查找 ko.observable() 长度

Question

编辑为什么计算出的长度不会保存？

有没有办法仅在精度为 1、2 或 3 时才对可观察量进行数据绑定(bind)？下面是我的虚拟机:

function FFS_ViewModel() {
    var self = this;
    .....
    self.SortOrder = ko.observable();
    self.SortOrderLen = ko.computed(function(){
          return self.SortOrder().length; // **Error Here: Cannot read property 'length' of undefined**
    });
    self.Description = ko.observable();
    self.records = ko.observableArray([]);
})

这是 View :

<table class='TFtable'>
   <thead>
       <tr>
         <th>Sort Order</th>
       </tr>
   </thead>
   <tbody data-bind="foreach: records">
       <tr id="mainFactors">
            <td data-bind="if: SortOrderLen === 2"></td>
            <td data-bind="text: Description"></td>
       </tr>
   </tbody>
</table>

Answer 1

问题 1:

当初始化一个不带参数的observable时，它的值变成undefined:

self.SortOrder = ko.observable();
console.log(self.SortOrder()); // Prints: undefined

当尝试访问未定义的属性时，会抛出错误:

(undefined).length; // Throws: Cannot read property 'length' of undefined

修复1:

确保您的计算可以处理未定义值:

self.SortOrderLen = ko.computed(function() {
  if (!self.SortOrder()) return 0;

  return self.SortOrder().length;
});

或确保使用有效值初始化SortOrder:

self.SortOrder = ko.observable([]);

问题 2:

当您想使用计算或其他可观察的值时，您需要调用它(它是一个函数)。

self.SortOrder;    // Returns the `computed` instance
self.SortOrder();  // Returns the actual value inside

因此，此绑定(bind)将不起作用:

// never `true`, since a ko.computed !== 2
data-bind="if: SortOrderLen === 2" 

修复 2:

解开绑定(bind)中的值:

data-bind="if: SortOrderLen() === 2"