ExtJS - 如何將組件配置選項傳遞給XTemplates？

Question

我定義的下列類擴展Ext.view.View：

Ext.define('Aft.view.comments.CommentsList', { 
    extend: 'Ext.view.View', 
    xtype: 'comments-list', 

    parameter: false, 

    tpl: new Ext.XTemplate(
    '<tpl for=".">', 
    ' <div class="comment">', 
      // some code here 
    ' <div class="fault">', 
    '  <tpl if="this.parameter">', 
      // some code also here   
    '  </tpl>', 
    ' </div>', 
    ' </div>', 
    '</tpl>', 
    { 
     strict: true, 
     // other methods and fields 
    }), 

    initComponent: function() { 
    this.config = Ext.apply({}, this.config); 
    this.tpl.config.parameter = this.config.parameter; 
    this.callParent(arguments); 
    } 
}); 

正如你所看到的，我想從組件外傳遞一個布爾參數XTemplate它裏面。我正在嘗試這樣做，因爲組件在3個不同的地方使用。其中之一，我希望它看起來有點不同（只是沒有一個div）。我發現參數化的XTemplate會是一個很好的解決方案，但我不能強制它工作。我創建的組件是這樣的：

items: [ 
    { 
     xtype: 'comments-list', 
     parameter: false 
    } 
] 

而且不管是什麼，我把作爲參數，我把在配置看來我的自定義類的其他實例之間共享的一切。因此，無論是每個評論列表的參數設置爲true，或每個都設置爲false。我顯然錯過了一些東西，但似乎這個話題也給其他人造成了困惑。儘管我沒有找到解決這個問題的正確方法。我已經嘗試了各種與config，factoryConfig和變量直接在類定義中的組合，但似乎沒有任何工作。

因此，我將是一個解決方案非常感激，或至少一個寶貴的鏈接博客文章或文檔。非常感謝你提前。

如果是相關的，我使用ExtJS的6經典。

Answer 1

的原因是你tpl是在prototype and is therefore shared between instances。這是我最大的寵兒，反對Ext在原型上設置對象的方式，而沒有理解它的真正含義。這也意味着你沒有訪問this如果你需要它，因爲你會在我的例子中看到的，因爲你需要配置「傳下」到模板。

你很大的問題實際上是給我證明了一點，我總是儘量讓我的球隊（在開發EXT-JS，因爲它是唯-EXT）一個不錯的簡單的例子;

您的tpl對象正在Aft.view.comments.CommentsList.prototype上設置，因此它被共享。

正確的解決方案是從構造函數（或initComponent）初始化tpl，以便爲每個實例創建一個新模板。見https://fiddle.sencha.com/#fiddle/111v

Ext.define('Aft.view.comments.CommentsList', { 
    extend: 'Ext.view.View', 
    xtype: 'comments-list', 

    // Primitives are always OK on prototypes because if you write, you will 
    // modify a property on the instance, not the prototype 
    parameter: false, 

    initComponent: function() { 
    this.tpl = new Ext.XTemplate(
    '<tpl for=".">', 
    ' <div class="comment">', 
      // some code here 
    ' <div class="fault">', 
    '  <tpl if="this.parameter">', 
      // some code also here   
    '  </tpl>', 
    ' </div>', 
    ' </div>', 
    '</tpl>', 
    { 
     strict: true, 
     parameter: this.parameter 
    }); 
    this.callParent(arguments); 
    } 
}); 

分機原型咆哮

當原型設定的東西，它意味着在傳遞一個配置對象時，呼叫者仍然可以覆蓋它。例如，在類以上我可以覆蓋tpl（並打破類的功能），實例化時。

// Will likely break the class if we have some assumptions in the HTML about the code 
items: [{xtype: 'comments-list', tpl: '<div>Broke you</div>'}] 

如果您在initComponent定義它，你要什麼覆蓋用戶傳入。請使用明智的。如果你在原型上定義它，它只是一個默認值，你的代碼不應該依賴它。

顯然，我們仍然必須記住的原型對象是共享的，所以如果你想要的是不共享的默認對象，你應該使用

initComponent: function() { 
    Ext.applyIf(this, { 
     someProp: {defaultObject: true} 
    }); 
    this.callParent(); 
} 

最後，如果你有一個對象不會改變（默認），那麼它並不重要，它可以存儲在原型上以節省內存，但是您必須小心不要修改它（除非您可以使用Object.freeze） 。