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);
  }
});

如您所见，我试图将一个 bool 参数从组件外部传递到组件内部的 XTemplate。我正在尝试这样做，因为该组件在 3 个不同的地方使用。在其中之一中，我希望它看起来略有不同(只是没有一个 div)。我发现参数化的 XTemplate 将是一个很好的解决方案，但我不能强制它工作。我正在创建这样的组件:

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

无论我输入什么作为参数，我在配置中输入的所有内容似乎都在自定义类的其他实例之间共享。因此，要么每个 CommentsList 的参数都设置为 true，要么每个 CommentsList 的参数都设置为 false。我显然错过了一些东西，但似乎这个话题也给其他人带来了困惑。尽管如此，我还是没有找到合适的方法来解决这个问题。我已经在类定义中直接尝试了 config、factoryConfig 和变量的各种组合，但似乎没有任何效果。

因此，我将非常感谢您提供解决方案，或者至少是博客文章或文档的有值(value)的链接。预先非常感谢您。

如果相关的话，我正在使用 ExtJS 6 classic。

Answer 1

原因是您的 tpl 位于 prototype and is therefore shared between instances 。这是我对 Ext 在原型(prototype)上设置对象而不了解其真正含义的方式最大的不满。这也意味着您无法访问 this 如果您需要它，正如您将在我的示例中看到的那样，因为您需要将配置“传递”到模板中。

你的好问题实际上给了我一个很好的简化示例，它证明了我一直试图向我的团队提出的观点(自从 Ext-JS 是 yui-ext 以来就一直在开发 Ext-JS)；

您的 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);
  }
});

Ext 原型(prototype)咆哮

在原型(prototype)上设置某些内容时，这意味着调用者在传入配置对象时仍然可以覆盖它。例如，在上面的类中，我可以在实例化 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 中定义它，您将覆盖用户传入的任何内容。请明智地使用它。如果您在原型(prototype)上定义它，那么它只是默认值，您的代码不应依赖于它。

显然，我们仍然要记住原型(prototype)上的对象是共享的，所以如果你想要一个不共享的默认对象，你应该使用

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

最后，如果您有一个不会更改的对象(默认)，那么这并不重要，最好存储在原型(prototype)上以节省内存，但您必须小心不要这样做请勿修改它(除非您可以使用 Object.freeze )。