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那样显示出来。 Eclipse IDE for JavaScript Web Developers仅部分（在现实生活中不切实际）工作;它使整个层次变得扁平化。

Answer 2

我发现这对我来说很好用： Backbone Objects用我的自定义对象包装，这允许我导航代码，扩展对象并轻松保存多个文件。

以下是：

对象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()
};

使用Backbone JS样板和＆amp;代码导航

2 个答案: