KnockoutJS 查找 ko.observable() 长度

Question

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

只有当一个 observable 的精度为 1、2 或 3 时，有没有办法对它进行数据绑定？下面是我的虚拟机：

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([]);
})

这里是视图：

<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

问题一：

在不带参数的情况下初始化observable 时，其值变为undefined：

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

尝试访问undefined的属性时，抛出错误：

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

修复 1：

要么确保您的计算可以处理undefined 值：

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

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

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

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

问题2：

当您想使用computed 或其他observable 的值时，您需要调用它（它是一个函数）。

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

因此，此绑定不会起作用：

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

修复 2：

解开绑定中的值：

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

Answer 2

您可以为此使用可见绑定：

data-bind="visible: shouldShow"

或者您也可以在评论中执行 if 逻辑

<!-- ko if: someExpressionGoesHere -->
   <td>show element</td>
<!-- /ko -->