Question

可以递归地组合淘汰组件 - 我正在尝试构建具有面板内面板的面板的ui ....

我知道/我认为我可以使用淘汰模板来实现这一点但我正在尝试使用组件（因为这些似乎是未来（？）。< / p>

无论如何我会尝试，看看我是否能让它发挥作用。但我很想知道我是否在浪费时间。

Answer 1

我希望这个递归组件样本可以帮助您：

function ComponentModel(params) {
  params = params || {};
  params.innerComponentsCount = params.innerComponentsCount || 0;
  var result = {
    name: 'name',
    components: ko.observableArray()
  };
  while(params.innerComponentsCount > 0) {
    var childModel = new ComponentModel();
    childModel.name = childModel.name + params.innerComponentsCount;
    result.components.push(childModel);
    params.innerComponentsCount--;
  }
  return result;
} 

ko.components.register('my-component', {
    template: { element: 'my-component-template' },
    viewModel: {
        createViewModel: function(params, componentInfo) {
            return new ComponentModel(params);
        }
    },
});
 
ko.applyBindings();

.my-component {
  border: 1px solid black;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<template id='my-component-template'>
    <div class="my-component">
      <div data-bind='text: name'></div>
      <!-- ko foreach: components -->
        <my-component></my-component>
      <!-- /ko -->
    </div>
</template>

<my-component params="innerComponentsCount: 2"></my-component>

淘汰组件可以递归组合吗？

1 个答案: