CANJS3 一个组件的多个实例

Question

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

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

多亏了 to-child 绑定，参数进入了子 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...');
    },
  }
});

到目前为止一切顺利，我实现了将两者放在同一个 window 上，并且在显示自定义参数时，它显示了差异。

但随之而来的是麻烦。两个子组件都有一个连接，（在视图模型中），然后我希望连接到同一个 IP，但订阅不同的频道。

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

如果有人知道如何在同一个页面上使用两个不同范围的组件，我将很乐意阅读。

编辑：真正的问题是 "model"（即 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

CANJS3 一个组件的多个实例

CANJS3 multiple instances of a component

javascript

web

canjs

canjs-component