0

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

应用程序.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目录，其中放置了视图的所有模板文件。要查看示例，我已上传项目的精简版

抱歉解释...我试图解释得更好:)

4

1 回答 1

0

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

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

缺点，这里是我不确定我所做的解决方案的地方，是我必须从需要 jquery 补充的每个视图调用每个 jquery 函数。

于 2013-10-10T07:37:03.717 回答