问题描述:

It's my first project using Backbone/Underscore and RequireJS. I have a "parent view" named Home and a child view named Sidebar. I got that the parent view loaded with the content of the child templates (static content for now, without models), but the problem is that jquery and scripts.js (home made file that have all the calls to jquery functions) not loading properly. Seems like jquery loads at the bigining, but not reloads or not refresh when the Home view's rendered. I'm going to show the code to try to explaining it better.

The two files that I want to load are jquery and scripts.js. Jquery is the library and I think that it loads (I don't know how test it). The second one is the scripts.js, file where I call the functions of jquery (.animate(...), .css(...), etc.).

Home view (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 View (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());

}

});

});

Finally, this is the code from my RequireJS configuration file (app.js). I've put that backbone.min depends on jquery, underscore and scripts to force to the view to load the scripts.js file.

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();

});

EDIT:

I've a /tpl directory where I put all the template files of the views. To see the example I've upload a lite version of the project

Sry for the explanation... I've tried to explain the much better as possible :)

网友答案:

I don't know if it's the best solution... If somebody knows one better, I'd be glad to know about it.

Finnally, I put the jQuery code on a callback that calls after a render event of backbone. At the begining I had the jquery code inside the backbone view, but afterwards I created differents jquery functions depending of the backbone view that called it, so now I have a script.js file with all the jquery functions.

The disadvantatge, and here is where I'm not sure about the solution I've done, is that I've to call every jquery function from every view that needs that jquery complements.

相关阅读:
Top