这是我的第一个使用 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
讽刺解释......我试图尽可能地解释得更好:)
答案 0 :(得分:0)
我不知道这是否是最好的解决方案......如果有人更了解一个,我会很高兴知道这件事。
最后,我将jQuery代码放在一个回调函数上,该回调函数在主干的render事件之后调用。在开始时我在主干视图中有jquery代码,但之后我根据调用它的主干视图创建了不同的jquery函数,所以现在我有一个带有所有jquery函数的script.js文件。
弱势群体,这里我不确定我已经完成的解决方案,是我要从每个视图调用每个jquery函数,需要jquery补充。< / p>