1

使用 CanJS (3)，我尝试插入两次相同的组件，但行为不同。'父' 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...');
    },
  }
});

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

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

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

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

编辑：真正的问题是“模型”的非唯一性（即 viewmodel.connect 对象）

4

1 回答 1

2

解决方案 ：

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

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

DefineMap 必须是这样的：

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

一些有趣的阅读： 值属性文档

于 2017-06-27T14:18:14.547 回答