javascript - CANJS3 一个组件的多个实例

Question

对于 CanJS (3)，我尝试插入两次相同的组件，但行为不同。“父”stache 看起来像:

<div class="container-fluid contents">
  <...>
     <my-component someParameters="value1"></my-component>
  </...>
  <...>
      <my-component someParameters="value2"></my-component>
  </...>
</div>

感谢 to-child 绑定(bind)，参数进入子 viewModel，这是一个简单的 DefineMap。

子组件很简单:

export default Component.extend({
  tag: 'my-component',
  viewModel: myviewmodel (a DefinedMap, with a can-connect attribute, and some others attributes),
  view: view (some stache file),
  events: {
    'inserted': function(el) {
      console.log('inserted my-component...');
    },
  }
});

到目前为止一切顺利，我实现了在同一个窗口中同时显示自定义参数，它显示了差异。

但随之而来的是麻烦。两个子组件都有一个连接(在 View 模型中)，然后我希望连接到同一个 IP，但订阅不同的 channel 。

看起来 CanJS 实际上并没有实例化两个不同的 View 模型，所以我最终得到了我的 can-connect 对象的同一个实例，这使得工作变得不可能......

如果有人知道如何在同一个 pagem 上有两个不同范围的组件，我会很高兴阅读它。

编辑:真正的问题是“模型”(即 viewmodel.connect 对象)的非单一性

Answer 1

解决方案:

can-connect 对象必须在闭包中:

var behaviors = function() {return connect([
    someBehavior,
    anotherBehavior
  ],
  {
    url: {
      getListData: "GET myURL"
    }
  })
};

DefineMap 必须是这样的:

var MyMap = DefineMap.extend({
  connection: {value: behaviors},
  parameters: ...
}

一些有趣的阅读: value attribute doc