I am learning backbone js, trying to make a small project.
In the of te page, I load require.js and text.js from the cloudflare CDN
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.8/require.min.js">//</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.10/text.js">//</script>
I have made a backbone view called "Boxes":
var Boxes = Backbone.View.extend({
// Choose an element.
el : '.content',
render : function () {
// Captur "this" -> the backbone view itself.
var that = this;
$(this.el).html('how do I load a html template here?');
}
});
Problems:
When I add the text.js plugin to the page, I get the following error:
Mismatched anonymous define() module: function (module) { 'use strict'; ......
So I can't have the require.js and the text.js both loaded, it gives me the above error even on a blank page without any other scripts on it.
Right now I know how to do it when I write my templates inline, in the index.html page.
I do it like this:
var Boxes = Backbone.View.extend({
el : '.content',
render : function () {
var that = this; // This backbone view
var template = _.template($('#user-list-template').html(), {});
that.$el.html(template);
}
});
Thank you!
In your HTML file, you only need to load requrejs like as shown in this index.html
<script type="text/javascript" data-main="js/main" src="js/libs/require-2.1.2.min.js"></script>
In above, "data-main" tells requirejs where to load its bootstrap file and in this case, it is under "js/main.js"
You can find the file in here.
In the main.js file, you will need to specify
require.config({ ... });
to configure requirejs.
After that you can use "define()/require()" to load the templates like...
define(['text!../../templates/app/content.about.html'],...);
See here for a complete example.
When you use require.js, you only use one script tag in your page. Everything else is loaded by Require.js.
To use a plugin, you'll configure it in a require.config
require.config({
paths: {
text: "path/to/text"
}
});
Then in your modules, you simply call it:
define([
"text!path/to/tpl"
], function( tplString ) {
});
Note though, that if you're managing templates, the best would be to load the template pre-compiled. Text plugin only return a string, this is not very good for optimisation and force you to repeat the template compilation logic. You should use a template loader plugin, for underscore/lodash micro-template, I recommend you this one: https://github.com/tbranyen/lodash-template-loader
If you want an example of an app using Require.js and Backbone, you should really check Backbone-Boilerplate: https://github.com/backbone-boilerplate/backbone-boilerplate
Backbone-Boilerplate is good way to setup your project fast using the best practices around Backbone development. Plus it use AMD extensively, so you'll have a working setting if it is your first time around.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With