带有RequireJS的Backbonejs / Underscorejs - 视图在渲染后不重新加载Jquery

时间:2013-08-27 15:27:53

标签: javascript jquery backbone.js requirejs underscore.js

这是我的第一个使用 Backbone / Underscore RequireJS 的项目。我有一个名为 Home 的“父视图”和一个名为 Sidebar 的子视图。我得到了父视图加载了子模板的内容(现在是静态内容,没有模型),但问题是jquery和scripts.js(所有调用jquery函数的自制文件)没有正确加载。看起来像jquery在bigining上加载,但是在Home视图呈现时不会重新加载或不刷新。我将展示代码以尝试更好地解释它。

我要加载的两个文件是 jquery scripts.js 。 Jquery是库,我认为它加载(我不知道如何测试它)。第二个是scripts.js文件,我在其中调用jquery的函数(.animate(...),. css(...)等)。

主页视图(Home.js)

define(function (require) {

    "use strict";

    var $    = require('jquery'),
        Scripts  = require('scripts'),
        Backbone = require('backbone.min'),
        tpl      = require('text!tpl/Home.html'),
        Sidebar  = require('app/views/Sidebar'),
        template = _.template(tpl);

    return Backbone.View.extend({
        el: $("body"),
        initialize  : function() {
            this.sidebar    = new Sidebar(),
            this.on('render', this.onRender);
        },
        render      : function () {         
            this.$el.html(template());
                return this.trigger('render');
        },
        onRender    : function() {
                this.sidebar.setElement('aside').render();
        }
    });
});

补充工具栏视图(Sidebar.js)

define(function (require) {

    "use strict";
    var $        = require('jquery'),
        Scripts  = require('scripts'),
        _        = require('underscore.min'),
        Backbone = require('backbone.min'),
        tpl      = require('text!tpl/Sidebar.html'),
        template = _.template(tpl);

    return Backbone.View.extend({
        el : $("#sidebar"),
        render: function () {
            this.$el.html(template()); 
        }
    });
});

最后,这是我的RequireJS配置文件(app.js)中的代码。我把那个backbone.min依赖于jquery,下划线和脚本强制到视图加载scripts.js文件。

app.js

require.config({
    baseUrl: 'js/lib',
    paths: {
        app: '../app',
        tpl: '../tpl'
    },
    map: {
        '*': {
            'app/app': 'app/app'
        }
    },
    shim: {
        'tablesorter.min'           : ['jquery.min'],
        'tablesorter.widgets.min'   : ['jquery.min', 'tablesorter.min'],
        'scripts'                   : ['jquery.min', 'tablesorter.min', 'tablesorter.widgets.min', 'json2'],
        'backbone.min' : {
            deps: ['underscore.min', 'jquery.min', 'scripts'],
            exports: 'Backbone'
        },
        'underscore.min': {
            exports: '_'
        }
    }    
});

require([
    "jquery.min",
    "backbone.min",
    "app/router",
    "scripts"
    ], function(
        $, 
        Backbone,
        Router,
        Scripts
    ){
        var router = new Router();
        Backbone.history.start();
});

修改

我有一个 / tpl 目录,其中我放置了视图的所有模板文件。要查看示例,我上传了lite version of the project

讽刺解释......我试图尽可能地解释得更好:)

1 个答案:

答案 0 :(得分:0)

我不知道这是否是最好的解决方案......如果有人更了解一个,我会很高兴知道这件事。

最后,我将jQuery代码放在一个回调函数上,该回调函数在主干的render事件之后调用。在开始时我在主干视图中有jquery代码,但之后我根据调用它的主干视图创建了不同的jquery函数,所以现在我有一个带有所有jquery函数的script.js文件。

弱势群体,这里我不确定我已经完成的解决方案,是我要从每个视图调用每个jquery函数,需要jquery补充。< / p>