Question

这是我的第一个使用 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

讽刺解释......我试图尽可能地解释得更好：）

Answer 1

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

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

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

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

1 个答案: