Knockout.js 订购淘汰组件列表

我有一个击倒组件的列表

  <!-- ko foreach: myComponents -->
  <div data-bind="component: $data"></div>
  <!-- /ko-->

但是我不知道如何对它们进行分类。我的数组只有

名称

和

jsonData

，但没有创建组件时创建的视图模型

ko.components.defaultLoader.loadViewModel = (function (original) {
    return function (errorCallback, viewModelConfig, callback) {
        function newCallback(createViewModel) {
            return callback(function (params, componentInfo) {
                var componentVM = createViewModel.call(this, params, componentInfo);
                if (params.callback) {
                    params.callback.call(null, componentVM);
                }
                return componentVM;
            });
        }
        return original.call(this, errorCallback, viewModelConfig, newCallback);
    }
}(ko.components.defaultLoader.loadViewModel));

我希望数组中的项保留为组件，以使它们易于重用

---

是否有方法访问创建的viewModel，以便我可以根据其属性进行排序？

对于下一版本的Knockout，可能有方法从父级访问组件视图模型，但目前它不是Knockout的一部分。（见和）

我想出了一种方法来包含组件绑定的回调，该回调是通过组件视图模型调用的

以下是对一组组件进行排序的示例：

第一部分是一个自定义绑定，它接受

回调

参数，并将其注入

组件

绑定的

参数

值中

ko.bindingHandlers.componentWithCallback = {
    init: function(element, valueAccessor, ignored1, ignored2, bindingContext) {
        function newValueAccessor() {
            var value = ko.unwrap(valueAccessor());
            if (value.callback) {
                value.params = ko.utils.extend(
                    { callback: value.callback },
                    value.params);
            }
            return value;
        }
        ko.applyBindingAccessorsToNode(
            element, { component: newValueAccessor }, bindingContext);
    }
};

第二部分是包装组件加载程序，以便在创建视图模型实例后调用回调函数

ko.components.defaultLoader.loadViewModel = (function (original) {
    return function (errorCallback, viewModelConfig, callback) {
        function newCallback(createViewModel) {
            return callback(function (params, componentInfo) {
                var componentVM = createViewModel.call(this, params, componentInfo);
                if (params.callback) {
                    params.callback.call(null, componentVM);
                }
                return componentVM;
            });
        }
        return original.call(this, errorCallback, viewModelConfig, newCallback);
    }
}(ko.components.defaultLoader.loadViewModel));

---

我想您可以使用requireJS（或您使用的任何模块加载器）手动获取viewmodels并检查属性。但在我看来，这个设计很糟糕。排序顺序应取决于数据，而不是viewmodel中的某些硬编码属性。如果viewmodel属性不是硬编码的，而是取决于传递的数据，那么应该可以在排序函数中应用相同的逻辑，直接使用数据。（我所说的数据是指你的

jsonim

）TL；DR：您不应该需要viewmodels来对阵列进行排序。用原始数据代替。没错，这是我刚才处理它的方式，但它本身很臭。提供排序/排序整数的逻辑应该封装在组件的viewmodel中，因为它的逻辑与此相关。假设我有10个不同的组件，所有这些组件计算排序索引的方式都略有不同，当它基于类型时，我必须有一些单独的排序提供程序。我认为每个viewmodel都封装一个函数会更好。我不同意这种逻辑应该在viewmodel本身内部。排序将与其他项目（组件）相关，因此属于“了解”所有组件的单独模块。但从概念上讲，这是一条细线，有点取决于您的语义。您能否详细介绍一下如何确定组件的“排序整数”？你的最终结果应该是什么？只是按组件类型排序，还是基于数据，还是两者的组合？仍然很难看出viewmodel上的方法增加了什么价值。它实际上是历史事件的时间线。对于大多数项目，它类似于一个日期，但是我们有多个

行动要求

项目，它们不是时间线事件，但我们希望它们位于特定的位置。也许你是对的，应该有一个单独的分类模块。这可能会使它更易于测试。