3

deftjs 看起来很有前途，因为它正好添加了我在 ExtJs 的 MVC 实现中遗漏的必要内容。

我实际上想念的是使路由成为可能/容易的功能。Extjs 有一个 Ext.ux.Router 功能，但我以前在这个库的帮助下使用过这样的代码：

initRoutes: function () {
    var me = this;
    Log.debug('Books.controller.App: initRoutes');

    //use PATH.JS library until ExtJs supports routing as Sencha Touch 2.0 does. (see utils\Path)
    Path.map("#/home").to(function () {
        me.getController('Home').index();
    });
    Path.map("#/trackingsheet").to(function () {
        me.getController('TrackingSheet').index();
    });

    Path.root('#/home');
    Path.listen();
}

由于在 deftjs 中创建关键部分的过程现在正好相反（视图创建控制器），我当然不能引用控制器的方法并实例化视图并使其可见。我在这里有一个非常简单的卡片布局 - 这意味着一次只能看到一个视图，没有必要像这样更深入（例如使任务窗格可见等）。

首选的方法是什么？

我可以考虑让 Viewport 成为一个视图工厂，之前有一些方法，比如控制器。

谢谢， da5id

4

1 回答 1

2

我通过在历史上下文类中使用 Ext.util.History 类解决了这个问题，该类可以在哈希更改时引发事件：

Ext.define('myApp.context.HistoryContext', {

    mixins: {
        observable: 'Ext.util.Observable'
    },

    constructor: function(config) {
        var me = this;

        if (config == null) {
            config = {};
        }
        this.initConfig(config);

        Ext.util.History.add('home');

        //init Ext.util.History; if there is a hash in the url,
        //controller will fire the event
        Ext.util.History.init(function(){
            var hash = document.location.hash;
            me.fireEvent('tokenChange', hash.replace('#', ''));
        });

        //add change handler for Ext.util.History; when a change in the token occurs,
        //this will fire controller's event to load the appropriate content
        Ext.util.History.on('change', function(token){
            me.fireEvent('tokenChange', token);
        });

        this.mixins.observable.constructor.call(this);
        this.addEvents('tokenChange');

        return this.callParent(arguments);
    }
});

然后您可以将此上下文注入您的控制器，并观察令牌更改，并在调度方法中实现操作：

Ext.define('myApp.controller.HomeController', {

    extend: 'Deft.mvc.ViewController',

    inject: [
        'historyContext'
    ],

    control: {
        appContainer: {},
        home: {
            click: 'addHistory'
        },
        about: {
            click: 'addHistory'
        }
    },

    observe: {
        historyContext: {
            tokenChange: "dispatch"
        }
    },

    init: function() {
        return this.callParent(arguments);
    },

    switchView: function(view) {
        //change this to get the cards for your card layout
        this.getAppContainer().add(Ext.ComponentMgr.create({
            xtype : view,
            flex : 1
        }));
    },

    addHistory: function(btn) {
        var token = btn.itemId;
        Ext.util.History.add(token);
    },

    dispatch: function(token) {
        // switch on token to determine which content to load
        switch(token) {
            case 'home':
                this.switchView('view-home-Index');
                break;
            case 'about':
                this.switchView('view-about-Index');
                break;
            default:
                break;
        }
    }
});

这对于一级路由（#home、#about）应该没问题，但是您需要实现自己的机制来获取二级和三级路由的令牌。(#home:tab1:subtab1) 您可以创建一个服务类来处理获取哈希并将服务注入每个控制器以进行调度。

有关本主题的进一步讨论，请访问https://github.com/deftjs/DeftJS/issues/44

于 2013-11-13T16:15:57.610 回答