Knockout JS Observable Array 可见计数答案

【问题标题】：Knockout JS Observable Array visible CountKnockout JS Observable Array 可见计数
【发布时间】：2014-10-01 09:18:59
【问题描述】：

使用 Knockout JS 设置可见：对可观察数组中的项目进行数据绑定。有没有一种方法可以在 Knockout JS 中计算特定于可见数据绑定 = true 的项目数？

我尝试过这样的事情（不工作）：

    var visibleItems = ko.utils.arrayFilter(self.MyItems(), function(item) {
        return item.visible == true;
    });
    var result = visibleItems().length;

在这个测试中，item.visible 是未定义的。这就是我要找的东西，我怎样才能获得与他们的“data-bind=visible:”相对应的 Knockout JS 的可见状态属性值：在项目中的某个地方可以访问吗？

【问题讨论】：

item.visible 是 observable 还是只是普通属性（即您需要 item.visible() == true）？
上面的代码不起作用，item.visible 是未定义的，这就是我真正要问的。在我的 html 代码中，我说的是 data-bind="visible:blah"。如何在我的 ko.computed observable 中获得淘汰赛 js“可见”属性？当然，它必须可以在其 API 中的某个地方访问
您为什么要访问可见绑定而不是“blah”，这是您绑定的，并且可能是您自己的 javascript 对象之一的可观察属性？
我正在尝试获取可见对象的总数。我用几个不同的过滤器来操作它。
听起来在你的根视图模型上拥有 visibleItems 计算数组并绑定到它可能更容易，而不是显示所有项目并为每个项目设置可见绑定。然后它的长度将始终与显示的项目数匹配。

标签： knockout.js

【解决方案1】：

除非您的可观察数组 self.MyItems 中的项目具有 visible 属性，否则您尝试执行的操作无法完成。 Knockout 中的 visible 绑定会更改 DOM 元素的 display 属性，而不是更改基础数据。

来自visible 绑定的文档：

当参数解析为类似 false 的值（例如，布尔值 false，或数值 0，或 null，或未定义）时，绑定将 yourElement.style.display 设置为 none，导致它被隐藏.这优先于您使用 CSS 定义的任何显示样式。

当参数解析为类似 true 的值（例如，布尔值 true，或非 null 对象或数组）时，绑定会删除 yourElement.style.display 值，使其变为可见。

【讨论】：

用于可见的主视图模型属性：数据绑定，是一个与其他几个依赖的可观察对象相关联的可观察对象。
你能说得更具体点吗？您到底在使用可见数据绑定什么？ visible 是 self.MyItems 包含的对象的可观察属性吗？
目前，data-bind="visible:$root.IsThisVisible($data)" 是根中的视图模型方法。在内部，IsThisVisible = function(data) { 有几个依赖于单个项目的可观察属性，它们是 self.MyItems 中的属性。如果任何底层依赖的 observables 发生变化，它们可以动态更新 IsThisVisible() 的可见性。
好的，我明白了。由于 $root.IsThisVisible 不是可观察的，因此您的 UI 不会动态更新是有道理的。我建议为您的项目创建一个ko.computed 函数（在本例中由$data 表示），该函数返回$root.IsThisVisible(self)。这样，您的项目将具有一个可观察的属性，您可以通过该属性切换它们的可见性。
嗯，我的 UI 可以动态更新，基于 $root.IsThisVisible 中的底层依赖可观察对象，唯一的问题是获取可见对象的计数。

【解决方案2】：

我相信您需要使用 ko.computed。原因是你最初拥有的只会被计算一次。

var visibleItems = ko.computed(function () {
    return ko.utils.arrayFilter(self.MyItems(), function(item) {
        return item.visible == true;
    });
});

var result = visibleItems().length;

【讨论】：

是的，我的代码在 ko.computed 中，.visible 对我不起作用
你如何确定一个项目是可见的？您绑定的可见属性是什么？
我有几个确定可见性的过滤器，但我的问题是想看看我们是否可以在 ko 内部访问与它们的 data-bind="visible:" 相关的淘汰赛 js 的“可见”属性.计算。我不得不想象那是在某处被追踪的。有什么想法吗？