Question

KnockoutJS是否支持某种组件层次结构或范围界定？基本上，我正在寻找这样的东西：

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

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

Answer 1

我认为有一个假冒命名空间的全局对象应足以防止名称冲突。例如：

＆＃13;

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();

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind='component: c.editor.message'></div>

＆＃13;

（取自Reference link的示例组件）

您甚至可以包装register方法来自动创建命名空间并通过帮助程序处理未定义的命名空间。可能会让不必要的东西复杂化。不过，我认为你以某种方式保护＆＃34;是一个好主意。全局组件命名空间以防止覆盖。

＆＃13;

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();

＆＃13;

<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>

＆＃13;

KO的组件层次结构（或缺少）

1 个答案: