Javascript 如何拼接ko.computeds

我得到了这两个ko.computeds列表，我想在其中拖放，但也用按钮移动以删除添加到列表

但是，我无法使它们同时使用dragndrop和按钮功能

对于拖放，我使用Ryan Niemeyers优秀的可排序库

我想我需要使我的计算机可写，但这就是我陷入困境的地方，似乎无法摆脱计算机的错误“拼接不是函数”

因此，拖放排序失败

这是其中一台计算机：

         this.availableTexts = ko.computed({
            read: function(){
               return ko.utils.arrayFilter(self.texts(), function(text) {
               return text.sceneID() === null;
            })
          },
          write: function(value){
            return value;
          },
          owner: this
        });

---

Full fiddle:

Niemeyer的敲除可排序库在内部使用

splice

对项目数组进行排序（）。我相信，即使它返回一个数组并有一个正确的写入方法，它也无法在计算机上工作

我建议使用

visible

绑定来隐藏单个项目。您必须公开

projectID

或映射您的项目以包含一个计算的项目，如下所示：

var projectID = 1;
self.allScenes = ko.observableArray(scenes.map(function(scene) {
  return Object.assign({}, scene, {
    isVisible: ko.computed(function() { 
      return scene.projectID === projectID;
  });
});

或者，在viewmodel中：

self.projectId = 1;

在HTML中：

<li data-bind="visible: projectID === $parent.projectId"> ... </li>

Niemeyer的敲除可排序库在内部使用

splice

对项目数组进行排序（）。我相信，即使它返回一个数组并有一个正确的写入方法，它也无法在计算机上工作

我建议使用

visible

绑定来隐藏单个项目。您必须公开

projectID

或映射您的项目以包含一个计算的项目，如下所示：

var projectID = 1;
self.allScenes = ko.observableArray(scenes.map(function(scene) {
  return Object.assign({}, scene, {
    isVisible: ko.computed(function() { 
      return scene.projectID === projectID;
  });
});

或者，在viewmodel中：

self.projectId = 1;

在HTML中：

<li data-bind="visible: projectID === $parent.projectId"> ... </li>

请参见：

在您的案例中，您可以使用

observatarray.filter

而不是

computed

突然，我不能用叉子叉你的小提琴了。因此，您可以用这个替换js，它将正常工作。

请参阅：

在您的案例中，您可以使用

observatarray.filter

而不是

computed

---

突然，我不能用叉子叉你的小提琴了。所以你可以用这个替换你的js，它会工作的。

谢谢@Tarwirdur Turon！这很接近。但是，我依赖于projectID和/或sceneID的静态变量。一个过滤器有两个输入，第二个输入是对照检查的值（projectID/sceneID），它的外观如何？重要通知。projectID/sceneID的值必须是可观察的，因为它们被输入到选择中。@AsleG我在这里看到错误：

。。。如果（！scene）{return[]；}…

。它位于ko.utils.arrayFilter谓词中。此函数必须返回布尔值。我想，你是说那里有

。。。如果（！scene）{return false；}…

。如果您认为其他东西工作不正常，请说明您正在做什么，以及您期望得到什么。谓词是一个返回数组元素的ko.utils.arrayFilter，不是吗？我需要过滤器在未定义场景时返回空数组，否则在初始化视图时会出错。这对我来说是一个普遍的问题。未选择场景时，视图将失败。@AsleG No.

谓词

是用作arrayFilter第二个参数的函数。它调用数组的每个元素，并且必须返回

true

（包括筛选数组中的元素）或

false

（从筛选数组中排除元素）。如果你写

返回[]它将被同化为
true
。（使用
if（[]）{console.log（“true”）；}else{console.log（“false”）}；
）检查它；谢谢，@Tarwirdur Turon！但是，如果匹配条件未定义，如何让filter函数返回空数组呢？谢谢@Tarwirdur Turon！这很接近。但是，我依赖于projectID和/或sceneID的静态变量。一个过滤器有两个输入，第二个输入是对照检查的值（projectID/sceneID），它的外观如何？重要通知。projectID/sceneID的值必须是可观察的，因为它们被输入到选择中。@AsleG我在这里看到错误：
。。。如果（！scene）{return[]；}…
。它位于ko.utils.arrayFilter谓词中。此函数必须返回布尔值。我想，你是说那里有
。。。如果（！scene）{return false；}…
。如果您认为其他东西工作不正常，请说明您正在做什么，以及您期望得到什么。谓词是一个返回数组元素的ko.utils.arrayFilter，不是吗？我需要过滤器在未定义场景时返回空数组，否则在初始化视图时会出错。这对我来说是一个普遍的问题。未选择场景时，视图将失败。@AsleG No.
谓词
是用作arrayFilter第二个参数的函数。它调用数组的每个元素，并且必须返回
true
（包括筛选数组中的元素）或
false
（从筛选数组中排除元素）。如果你写
返回[]它将被同化为
true
。（使用
if（[]）{console.log（“true”）；}else{console.log（“false”）}；
）检查它；谢谢，@Tarwirdur Turon！但是，如果匹配条件未定义，如何让filter函数返回空数组呢？这是一个非常好的解决方法建议，@user3297291。然而，我回到了一个事实，即我针对“可见”语句绑定的文本仍然是一个计算文本，因为它是在projectd上过滤的。我当然可以将projectd添加到visible中，但这可能会在我的视图中加载大量文本。肯定有一种方法可以解决订阅功能的问题吗？您可以在虚拟元素上使用
if
绑定，而不是
visible
（
…
）和
if
中的元素将在正确的情况下从DOM和处理中排除。这是一个非常好的解决方法@user3297291的建议。但是我回到了一个事实，即我绑定的文本是“可见的”语句仍然是一个计算语句，因为它是在projectID上过滤的