1

我有一个淘汰组件列表

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

以下是我如何创建可观察的组件定义数组，并按预期呈现。

createComponents = function(jsonData) {
    var components;
    components = _.map(jsonData, function( jsonItem ) {
       switch (jsonItem.type) {
         case 0:
           return {
             name: "component-type-0",
             params: jsonItem
           }; 
         case 1:
           return {
             name: "component-type-1",
             params: jsonItem
           };
         default:
           throw new Error("No case for type " + jsonItem.type);
    });

    this.myComponents( components );
  };

但是我不确定如何对它们进行排序。我的数组只有创建组件时创建的 viewModelname和 the，但没有。jsonData

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

有没有办法访问创建的视图模型，以便我可以根据它的属性进行排序？

4

1 回答 1

2

在 Knockout 的下一个版本中，可能有一种方法可以从父级访问组件视图模型，但目前它还不是 Knockout 的一部分。（见https://github.com/knockout/knockout/issues/1475和 https://github.com/knockout/knockout/issues/1533）

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

这是一个对一组组件进行排序的示例：http: //jsfiddle.net/mbest/a6f3fmzt/

第一部分是一个自定义绑定，它接受一个callback参数并将其注入到绑定的params值中component。

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));
于 2014-09-25T21:24:49.957 回答