对于 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 对象)的非单一性
最佳答案
解决方案:
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
关于javascript - CANJS3 一个组件的多个实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44718329/