javascript - KO 的组件层次结构(或缺乏)

Question

KnockoutJS 支持某种组件层次结构或范围吗？本质上，我正在寻找这样的东西:

ko.components['parent'].components.register('child1', ...)

我在文档中没有看到类似的内容。如果没有这个，我必须强制我的所有组件都具有全局唯一的名称。

Answer 1

我认为拥有一个伪造命名空间的全局对象应该足以防止名称冲突。例如:

var c = {
  editor: {
    message: "c.editor.message"
  }
};

ko.components.register(c.editor.message, {
    viewModel: function(params) {
        this.text = ko.observable(params && params.initialText || '');
    },
    template: 'Message: <input data-bind="textInput: text" /> '
            + '(length: <span data-bind="text: text().length"></span>)'
});
 
ko.applyBindings();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind='component: c.editor.message'></div>

(示例组件取自 here )

您甚至可以包装 register 方法来自动创建命名空间并通过帮助程序处理未定义的命名空间。但可能会让事情变得不必要的复杂。不过，我认为以某种方式“保护”全局组件 namespace 以防止覆盖是个好主意。

var c = (function() {
  var components = {};
  
  var register = function(path, opts) {
    return path
      .reduce(function(pos, k, i, arr) {
        if (i >= arr.length - 1) {
          if (pos[k]) {
            throw new Error("Component name [" + arr + "] already in use");
          }
          
          pos[k] = arr.join("--");
          ko.components.register(pos[k], opts);
        } else {
          pos[k] = pos[k] || {};
        }
      
        return pos[k];
      }, components);
  };
  
  var get = function() {
     return Array.from(arguments)
       .reduce(function(pos, k) {
         return k ? pos[k] || k : null;
       }, components);
  };
  
  return {
    register: register,
    get: get
  };
}());

c.register(["editor", "message"], {
    viewModel: function(params) {
        this.text = ko.observable(params && params.initialText || '');
    },
    template: 'Message: <input data-bind="textInput: text" /> '
            + '(length: <span data-bind="text: text().length"></span>)'
});
 
ko.applyBindings();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind='component: c.get("editor", "message")'></div>