javascript - 在 Backbone 中实现一个 memoize 风格的模块加载器

Question

引用 Bocoup 的这篇文章开始重组我的 Backbone 应用程序:http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules

我在初始化模块中定义的 View 时遇到问题。

请参阅此 jsfiddle:http://jsfiddle.net/nicksergeant/8L6JX/

我的 application.js:

// Memoizing technique from http://weblog.bocoup.com/organizing-your-backbone-js-application-with-modules
var sidepros = {
    // Create this closure to contain the cached modules
    module: function() {
        // Internal module cache.
        var modules = {};

        // Create a new module reference scaffold or load an
        // existing module.
        return function(name) {
            // If this module has already been created, return it.
            if (modules[name]) {
                return modules[name];
            }

            // Create a module and save it under this name
            return modules[name] = { Views: {} };
        };
    }()
};

// Using the jQuery ready event is excellent for ensuring all 
// code has been downloaded and evaluated and is ready to be 
// initialized. Treat this as your single entry point into the 
// application.
jQuery(function($) {

    if ($('body').hasClass('apply')) {
        sidepros.app = new sidepros.module('apply').Views.AppView();
    }

});

模块，apply.js:

(function(Apply) {

    App = sidepros.app;

    Apply.FieldModel = Backbone.Model.extend({
        group: null
    });
    FieldView = Backbone.View.extend({
        initialize: function() {
            this.model = new FieldModel({
                group: $(this.el).parents('div.group').attr('id')
            });
            this.model.view = this;

            this.$tooltip = $('div.tooltip', $('#' + this.model.get('group')));
        },
        events: {
            'focus': 'focused',
            'blur' : 'blurred',
            'keyup': 'updateTooltip'
        },
        focused: function() {
            App.$tooltips.hide();
            this.$tooltip.show();
        },
        blurred: function() {
            App.$tooltips.hide();
        },
        updateTooltip: function() {
            if (this.model.get('group') == 'name') {
                short_name = $.trim(App.$first_name.val() + ' ' + App.$last_name.val().charAt(0));
                if (short_name !== '') {
                    short_name = ': ' + short_name;
                }
                App.$name_preview.text($.trim(short_name));
            }
        }
    });

    AppView = Backbone.View.extend({
        el: '#app',

        initialize: function(opts) {
            $('input, select, textarea', this.el).each(this.addField);

            this.$first_name   = $('input#id_first_name', this.el);
            this.$last_name    = $('input#id_last_name', this.el);
            this.$name_preview = $('strong#name-preview', this.el);
            this.$tooltips     = $('div.tooltip', this.el);
        },
        addField: function() {
            model = new FieldView({ el: this });
        }
    });

    Apply.Views = {
        'AppView': AppView,
        'FieldView': FieldView
    };

})(sidepros.module('apply'));

当尝试像这样初始化 AppView 时:

sidepros.app = new sidepros.module('apply').Views.AppView();

我得到错误:

Uncaught TypeError: Object #<Object> has no method '_configure'

Answer 1

您收到该错误是因为 Javascript 对您的构造函数的上下文感到困惑。如果您进入 AppView 构造函数，上下文为 Apply.Views，这意味着 new 运算符尚未被调用。

要消除该错误，您需要执行以下操作之一:

    var appView = sidepros.module('apply').Views.AppView;
    sidepros.app = new appView();

或

    sidepros.app = new (sidepros.module('apply').Views.AppView)();

除此之外，我不确定您要做什么。您的 jsFiddle 中没有 input、select 或 textarea 节点，所以我不能确定您的下一个问题是什么。

此外，这一行 model = new FieldView({ el: this }): 让我觉得很奇怪。为什么要在 addField 函数中将模型设置为 View ？

我认为需要一个新的 jsFiddle 来进一步调试。