KnockoutJS 查找 ko.observable() 长度

Posted 2023-03-27

【中文标题】KnockoutJS 查找 ko.observable() 长度

【英文标题】：KnockoutJS Find ko.observable() length

【发布时间】：2018-07-24 02:01:06

【问题描述】：

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

只有当一个 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>

【问题讨论】：

应该SortOrder 成为observableArray，因为您想使用它的length？如果应该是字符串，初始化为''

【参考方案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"

【讨论】：

这个答案比我的要完整得多，建议先运行这个，但还是看看我的答案中给出的实现选项。

感谢详细的解释！信息量很大

我真的很喜欢你的回答！

【参考方案2】：

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

data-bind="visible: shouldShow"

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

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

【讨论】：

我喜欢对这类事情使用注释技术，但有一个有效的论点认为这会使 DOM 变得混乱

谢谢，你能告诉我我的表达是否正确吗？

还是我需要换一种方式处理？

我很确定语法应该像 javascript 中的普通 if 语句，例如：data-bind="visible: SortOrder && precision === 2" 如果我​​要检查多个条件我会将其推送到函数 data-bind="visible: $parent.checkSort(SortOrder,precision)" 并在您的 js 中进行评估。所以我以前没见过你的例子。

fyi $parent 用于访问视图模型中不在循环中的函数