使用 Backbone JS 样板和代码导航

Question

一个新手问题： 我已经从 https://github.com/david0178418/BackboneJS-AMD-Boilerplate 下载了主干样板 它使用 require.js，我想知道开发过程中的代码导航。

这是我的问题： 假设我有 2 个视图，一个视图扩展另一个视图，如下所示：

视图 1：

define([
    'underscoreLoader',
    'backboneLoader',
    'text!templates/main.html'
],
    function (_, Backbone, MainTemplate) {
        "use strict";

        return Backbone.View.extend({
            template:_.template(MainTemplate),

            initialize:function () {
                this.render();
            },

            log:function(msg){
                console.log(msg);
            },

            render:function () {
                this.$el.append(this.template({}));
                return this;
            }
        });
    }
);

视图 2：

define([
    'underscoreLoader',
    'backboneLoader',
    'text!templates/other.html',
    'views/main-view'
],
    function (_, Backbone, MainTemplate,MainView) {
        "use strict";

        // how would you navigate to MainView (main-view.js) 

        return MainView.extend({
            template:_.template(MainTemplate),

            initialize:function () {
                this.render();
            },

            render:function () {
                this.log("my message");
                this.$el.append(this.template({}));
                return this;
            }
        });
    }
);

现在，当我开发（我使用 IntelliJ）时，我想在扩展视图上单击鼠标中键 MainView 并导航到无需浏览项目树即可查看代码。

使用这个样板可以吗？有更好的方法或更好的样板吗？

Answer 1

我真的很希望 Netbeans 的导航器向我展示所有方法：

var New_Controller = Backbone.View.extend({
    el : null, ...
}

但我似乎无法让它工作。 Google 为 @lends 想出了一些办法，但我什至无法将 Backbone.js 加载到代码提示缓存中。

我最终安装了 WebStorm（我在所有 Egghead.io 教程中看到了 IDE）以使导航器列出所有方法和属性。

仅供参考，Aptana Studio 和 Zend Studio 的表现与 Netbeans 完全不同。而面向 JavaScript Web 开发人员的 Eclipse IDE 仅部分有效（在现实生活中不切实际）；它使整个层次结构扁平化。

Answer 2

我发现这对我来说效果很好：
Backbone 对象包含我的自定义对象，这使我能够轻松导航代码、扩展对象并保存多个文件。

方法如下：

对象 1

function ItemModel() {
    ItemModel.model = (
        Backbone.Model.extend({
            initialize:function () {

            },
            defaults:{
                name:"item name"
            },
            log:function(){
                console.log("inherited method");
            }
        })
        );
    return new ItemModel.model();
}

对象 2

function ItemModel2() {
    ItemModel2.model = (
        ItemModel.model.extend({
            initialize:function () {

            },
            defaults:{
                name:"item name2"
            }
        })
        );
    return new ItemModel2.model();
}

以及在我的应用程序中：

var App = {
    item:new ItemModel(),
    item2:new ItemModel2()
};