如何在组件内部缓存子组件实例 [英] How to cache subcomponents instance inside components

问题描述

我在网上找到了许多Sencha Touch示例，但它们并不是真正专注于正确的视图封装.因此，即使按钮深深嵌套在视图中，控制器也会侦听每个按钮的事件.换句话说，视图的内部泄漏从来都不是一件好事.

A lot of Sencha Touch examples I found online, don't really focus on proper view encapsulation. So the Controller listens to every single button's event even if the button is deep nested inside a view. In other words the internals of the view leak through which is never a good thing.

我发现了一个很好的教程，它鼓励您创建有意义的视图来侦听本地事件并引发有意义的业务事件等.

I found one good tutorial that encourages you to create meaningful views that listen to local events and raise meaningful business events etc.

http://miamicoder .com/2012/how-to-create-a-sencha-touch-2-app-part-2/

但是，到目前为止，我还不能真正弄清楚的一件事是如何最好地缓存嵌套的组件实例.考虑以下示例:

However, one thing that I couldn't really figure out so far is how to best cache nested component instances. Consider this example:

Ext.define("NotesApp.view.NotesListContainer", {
    extend: "Ext.Container",
    alias: "widget.noteslistcontainer",

    initialize: function () {

        this.callParent(arguments);

        var newButton = {
            xtype: "button",
            text: 'New',
            ui: 'action',
            handler: this.onNewButtonTap,
            scope: this
        };

        var topToolbar = {
            xtype: "toolbar",
            title: 'My Notes',
            docked: "top",
            items: [
                { xtype: 'spacer' },
                newButton
            ]
        };

        this.add([topToolbar]);
    },
    onNewButtonTap: function () {
        console.log("newNoteCommand");
        this.fireEvent("newNoteCommand", this);
    },
    config: {
        layout: {
            type: 'fit'
        }
    }
});

假设我们要在NotesListContainer中添加方法setSpecialUIState.调用它时，我们想对newButton做一些操作(例如，将其隐藏).我如何获得对newButton实例的访问权限而又不会误用Ext.getComp()?我可以将其设置为实例变量吗?规范的方式如何?

Let's say we want to add a method setSpecialUIState to our NotesListContainer. When it's called we want to do something with the newButton (e.g. hide it). How would I gain access to the newButton instance without misusing Ext.getComp() for that? Can I set it as an instance variable? How is the canonical way?

更新

我刚刚按照Nikolaj Borisik的建议尝试了此操作.

I just tried this as Nikolaj Borisik suggested.

    this._newButton = this.add([{
            xtype: "button",
            text: 'New',
            ui: 'action',
            handler: this.onNewButtonTap,
            scope: this
        }];

那就像一种魅力.我只是不知道这样做是惯用的还是我可能没有任何缺点.否则，我强烈建议您这样做.除了Sencha之外，最好是撰写有意义的视图以抽象出一致的UI部分.这比将每个按钮都泄漏到控制器中并直接与它们玩弄要好得多.

That works like a charm. I just don't know if its idiomatic to do so or if there are any downsides I might be missing. Otherwise I would highly recommend to do this. Sencha aside, it's much better to compose meaningful views that abstract away coherent UI parts. That's much better than leak every single button through to the controller and fiddle directly with them.

所以我想知道这种方法是否有缺点?

So I wonder if there are any downsides of this approach?

推荐答案

在我与Sencha花了更多时间之后，我发现我对Ext.getCmp()的假设是错误的.我认为这将首先查询DOM以找到匹配的ID，然后尝试获取绑定到它的组件实例.但是，这不是它的作用.实际上，它根本不查询DOM.它只是查询一个名为ComponentManager的工具，该工具保存对所有使用的组件beeing的引用.

After I spent more time with Sencha I figured out that I had a wrong assumption about Ext.getCmp(). I thought this would first query the DOM to find a matching ID and then would try to get the component instance which is bound to it. However, that's not what it does. In fact, it doesn't query the DOM at all. It just queries a facility called the ComponentManager which holds references to all components beeing used.

因此，使用它并不是 肮脏.但是，我们仍然可以做得更好.

So, it's not that dirty to use it. However, we still can do better.

每个容器都支持方法child(selector)和down(selector)来查询子组件.乍一看，这似乎是在查询DOM，但再次只查询ComponentManager.它在起点使用容器，并查询其内部项目.两者之间的区别在于，child(selector)仅查询第一个子级别，而down(selector)仅查询所有子级别.

Every container supports the methods child(selector) and down(selector) to query for sub components. While at first glance this seems to query the DOM, again that does only query the ComponentManager. It uses the container at the starting point and queries down it's inner items. The difference between both is that child(selector) only queries the very first sub level whereas down(selector) queries all sub level.

我想可以使用它们来获取这些子组件的句柄.但是，如果由于对这些方法的重复调用而仍然存在性能问题，我建议在第一次检索后将其缓存.

I guess it's ok to use those to get a handle on those sub components. However, if there are still performance concerns because of repetitive calls to those method's I would recommend to cache those after the very first retrieval.

这篇关于如何在组件内部缓存子组件实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！