如何创建一个Backbone.js的基本视图？ [英] How to create a base view in backbone.js?

问题描述

我需要创建将延长所有我的观点基本观点。
我真的不知道何时何地宣布了这一观点。

基本上，我需要注入全局变量我所有的模板，我也不做，在每个渲染（）方法。

这是我的树结构现在：

  | -main.js
| -app.js
| -require.js
| -app
| |  - 查看
| | | -Dashboard.js
| | | -Header.js
| | | -Content.js
| |  - 模型
| | -Collection
| | -Template
|
| -Libs
   | -...
 

这是我的app.js

  VAR应用= {
    ApiURL：HTTP：//domain.local
    查看：{}，
    型号：{}，
    专辑：{}，
    注册地：{}，
    路由器：空
};定义（['骨干'，'查看/仪表板']，功能（骨干）{
    VAR AppRouter = Backbone.Router.extend（{
        路线：{
            仪表板：指数，
        }，        指数：功能（）{
            的console.log（'路由索引路径...'）;
            变种x =新App.View.Dashboard（{EL：$（'＃主要内容），键入：'其他'}）;
        }
    }）;    VAR初始化函数=（）{
        App.Router =新AppRouter;
        Backbone.history.start（{pushState的：真正}）;
        的console.log（'骨干正在运行...'）;
    };    返回{
        初始化：初始化
    };
}）;
 

和现在我所有的看法继承 Backbone.View 是这样的：

  App.View.Dashboard = Backbone.View.extend（{
 

我要创造我自己的基本视图所有自会扩展应用程序的意见。
这是我到目前为止做的，但我不知道在哪里这块code的地方，因为在app.js我加载仪表板视图，所以我需要做之前，但我需要需要在所有视图此基础视图对象......所以我迷路了：（

 定义（['骨干'，'底线'，'枝']，功能（骨干，_）{    App.View.Base = Backbone.View.extend（{}）;
    _.extends（App.View.Base.prototype，{
        初始化：功能（PARAMS）
        {
            this.el = params.el;
            this.init（PARAMS）;
        }，        初始化：功能（PARAMS）
        {
        }，        renderTemplate：功能（template_path，数据）
        {
            VAR TPL =小枝（{HREF：template_path，异步：假}）;            //变量注入
            data.user = App.Registry.User;
            data.account = App.Registry.Account;            返回tpl.render（数据）;
        }
    }）;}）;
 

任何想法或者言论是受欢迎的。答案将是最好的：D

谢谢，马克西姆。

解决方案

  App.View.Base = Backbone.View.extend（{
  baseMethod：功能（PARAMS）{};
}）;App.ExtendedView.Base = App.View.Base.extend（{
  //此处新玩意  //覆盖App.View.Base.baseMethod
  baseMethod：功能（PARAMS）{
    //压倒一切的东西在这里
    App.View.Base.prototype.baseMethod.call（此，则params）; //调用super.baseMethod（）
  }
}）;
 

I need to create a base view which all my views would extends. I'm not really sure where and when to declare this view.

Basically, I need to inject global variables to all my templates and I don't do to that in each and every render() methods.

this is my tree structure for now:

|-main.js
|-app.js
|-require.js
|-App
|  |-View
|  |   |-Dashboard.js
|  |   |-Header.js
|  |   |-Content.js
|  |-Model
|  |-Collection
|  |-Template
|
|-Libs
   |-...

this is my app.js

var App = {
    ApiURL: "http://domain.local",
    View: {},
    Model: {},
    Collection: {},
    Registry: {},
    Router: null
};

define(['backbone', 'View/Dashboard'], function(Backbone){
    var AppRouter = Backbone.Router.extend({
        routes : {
            "dashboard": "index",
        },

        index: function() {
            console.log('routing index route...');
            var x = new App.View.Dashboard({el:$('#main-content'), type:'other'});
        }
    });

    var initialize = function() {
        App.Router = new AppRouter;
        Backbone.history.start({pushState: true});
        console.log('Backbone is running...');
    };

    return {
        initialize : initialize
    };
});

And for now all my view inherit from Backbone.View like this:

App.View.Dashboard = Backbone.View.extend({

I want to create my own Base View which all the views from the application would extends. This is what I've done so far, but I don't know where to place this piece of code because in app.js I'm loading the Dashboard view so I need to do it before but I need to require this base view object in all views... so I'm lost :(

define(['backbone', 'underscore', 'twig'], function(Backbone, _){

    App.View.Base = Backbone.View.extend({});
    _.extends(App.View.Base.prototype, {
        initialize: function(params)
        {
            this.el = params.el;
            this.init(params);
        },

        init: function(params)
        {
        },

        renderTemplate:function(template_path, data)
        {
            var tpl = twig({href:template_path, async:false});

            // Inject variables
            data.user = App.Registry.User;
            data.account = App.Registry.Account;

            return tpl.render(data);
        }
    });

});

Any idea or remarks are welcome. An answer would be the best :D

Thanks, Maxime.

解决方案

App.View.Base = Backbone.View.extend({
  baseMethod: function( params ) {};
});

App.ExtendedView.Base = App.View.Base.extend({
  // new stuff here

  // overriding App.View.Base.baseMethod
  baseMethod: function( params ) {
    // overriding stuff here 
    App.View.Base.prototype.baseMethod.call(this, params); // calling super.baseMethod()
  }
});

这篇关于如何创建一个Backbone.js的基本视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！