CANJS3組件的多個實例

Question

使用CanJS（3），我試圖插入兩次相同的組件，但行為不同。 “父”情節看起來像：

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

多虧了子綁定，該參數才能進入子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...');
    },
  }
});

到目前為止，到目前為止，我實現了將它們都放在同一個窗口中，並且在顯示自定義參數的同時，還顯示了區別。

但是后來麻煩了。 兩個子組件都有一個連接（在viewmodel中），我希望然后再連接到相同的IP，但要訂閱另一個通道。

看起來CanJS實際上並沒有實例化兩個不同的viewmodel，所以我最終得到了我的can-connect對象的相同實例，這使工作變得不可能...

如果有人想知道如何在同一個pagem中具有兩個組件，但是具有兩個不同的范圍，那么我將很高興閱讀它。

編輯：真正的問題是“模型”（即，viewmodel.connect對象）的非唯一性

Answer 1

解決方案 ：

可連接對象必須位於閉包中：

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

而且DefineMap必須類似於：

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

一些有趣的閱讀： 值屬性doc