I'm trying this easy code from Addy's book but I can't make it work:
var TodoRouter = Backbone.Router.extend({
routes: {
"about" : "showAbout",
"search/:query" : "searchTodos",
"search/:query/p:page" : "searchTodos"
},
showAbout: function(){},
searchTodos: function(query, page){
var page_number = page || 1;
console.log("Page number: " + page_number + " of the results for todos containing the wo");
}
});
var myTodoRouter = new TodoRouter();
Backbone.history.start();
The console returns this with an error:
Uncaught TypeError: Property '$' of object #<Object> is not a function backbone-min.js:1
h.extend.start backbone-min.js:1
(anonymous function)
If I comment out Backbone.history.start() there's no error (neither the "app" behaves the way it is supposed to behave).
Any help is appreciated.
[SOLVED] the JS files (JQuery, Underscore and Backbone were added to HTML in the wrong order. The right order for me was: JQuery, Underscore, Backbone, MyOwnJSFiles. Thanks anyone for reading, hope this helps
Related
I try to customize my datepicker by following this :
https://productblog.townscript.com/customizing-angular-ui-bootstrap-directives-c4461c12afa9#.hfvv6e2il
On theses lines of code :
$provide.decorator('daypickerDirective', function ($delegate) {
var directive = $delegate[0];
directive.templateUrl = "custom-template/datepicker/day.html";
return $delegate;
});
I've this error :
Unknown provider: daypickerDirectiveProvider
Note : I'm a newbie :/
Any idea ?
Update 1
http://plnkr.co/edit/1IJtST5eGrWVipLip7hX
Yes, I've found the solution :
https://github.com/spongessuck/gm.datepickerMultiSelect/issues/28
The v1.0.6 doesn't support it, because you are decorating
daypickerDirective and not the new uibDaypickerDirective.
I am new to backbonejs. What I am trying to do is, render a template on page load and pass model as data parameter in _.template function. Here is my bacbone code:
var Trip = Backbone.Model.extend({
url: '/trips/' + trip_id + '/show'
});
var InviteTraveller = Backbone.View.extend({
el: '.page',
render: function () {
var that = this;
var trip = new Trip();
trip.fetch({
success: function(){
console.log(trip); //logs trip object correctly
var template = _.template($('#invite-traveller-template').html(), {trip: trip});
that.$el.html(template);
}
});
}
});
var Router = Backbone.Router.extend({
routes: {
'': 'fetchTrip'
}
});
var inviteTraveller = new InviteTraveller();
var router = new Router();
router.on('route:fetchTrip',function () {
inviteTraveller.render();
});
Backbone.history.start();
And here is my sample template:
<script type="text/template" id="invite-traveller-template">
<h3>Trip</h3>
<h3><%= trip.get('name') %></h3>
</script>
On running, I am getting the this in browser window and console shows:
trip is not defined
I am facing this issue since yesterday but could not figure out the solution yet. Not understanding what is going wrong, code also seems to be right. Any help would be greatly appreciated.
Update:
I removed
inviteTravellers.render();
from router.on() and then reloaded the page in browser. I still got same error which means that <script></script> (template) is being compiled before calling render() of InviteTraveller view. What can be the possible reason for this?
I had the same issue (underscore v1.8.2). My fix:
var template = _.template($('#invite-traveller-template').html());
var compiled = template({trip: trip});
that.$el.html(compiled);
You're passing the whole model to the template. Typically you would call model.toJSON and then pass its result to the template. Additionally using <%= in your template to render the attribute, which is meant for interpolating variables from that JSON object you're passing.
You can pass a whole model to the template and use <% ... %> to execute pure Javascript code and use print to get the attribute but it's probably overkill.
Have a look at this fiddle.
You code work perfectfly, here's it
I think that your problem came from another code, not the one you have posted, because there's no way for your view to render if you remove :
inviteTravellers.render();
Try to chaneg <h3><% trip.get('name'); %></h3> by <h3><%= trip.get('name') %></h3>
My code seems to be right but still my template was getting compiled on page load and I was getting trip is not defined error. I did not understand the reason of this behavior yet.
I solved this issue by using handlebarsjs instead of default underscore templates.
This is my sample JST file
(function() {
var _ref;
if ((_ref = window.JST) == null) {
window.JST = {};
}
window.JST['test'] = function(context) {
return (function() {
var $o;
$o = [];
$o.push("<h1>yayyyyyyaa</h1>");
return $o.join("\n");
}).call(context);
};
}).call(this);
I use require.js in a backbone app, like
define ['backbone', 'marionette', 'text!javascripts/backbone/templates/test.jst'],
(Backbone, Marionette, template) ->
class Test extends Backbone.Marionette.ItemView
template: JST[template]
And when i load the app, i get:
ReferenceError: JST is not defined
Why oh why!
Thanks!
The problem with your code is that you are getting the text of the function in your "template" variable. You still need to eval that text to create an actual JST instance on the window.
The problem as a whole is that you are abusing the text! plugin, what you really need to do is use the modules of requireJs instead of hanging your variables on the window.
Here is my error:
Uncaught NoTemplateError: Could not find template: '<!-- HTML Template -->
<div id="start_div">
<h2>Choose your path to ... // the rest of the template
It is telling me that there is no template but then it outputs the template that it said it could not find.
Here is my code:
require(["jquery", "marionette", "views/StartView" ],
function($, marionette, StartView) {
var SCApp = new marionette.Application();
SCApp.addRegions({
mainRegion: "#center_court"
});
var startView = new StartView();
SCApp.mainRegion.show(startView);
SCApp.start();
}
Here is the StartView.js
define(["jquery", "marionette", "text!templates/startDiv.html"],
function($, marionette, template){
var StartView = marionette.ItemView.extend({
//template: "#start_div"
template: template
});
// Returns the View class
return StartView;
});
Can anyone see what I'm doing wrong? Do I need something for templating in the require method?
Any suggestion are greatly appreciated.
Andrew
Usually Marionette search for a template inside the DOM with an ID equal to the one you reference in your view, so you have to change the loadTemplate from Marionette.TemplateCache in this way:
Backbone.Marionette.TemplateCache.prototype.loadTemplate = function(templateId) {
var template = templateId;
if (!template || template.length === 0){
var msg = "Could not find template: '" + templateId + "'";
var err = new Error(msg);
err.name = "NoTemplateError";
throw err;
}
return template;
};
I actually don't remember where I found this function, I can't find it anymore in Marionette's Wiki, anyway it's working fine for me.
I had the same issue yesterday and found the next interesting facts:
When I've changed the 'not found' template's content, it wasn't changed in error message.
When I've changed it's file name (and updated it in import statement) — the error was fixed, updated content was shown.
... then I've changed the name back, everything was fine.
Looks like some bug with caching.
Upd: here I found deep analysis and solution:
http://blog.icanmakethiswork.io/2014/03/caching-and-cache-busting-with-requirejs.html
I've been working through a wonderful set of tutorials by Derick Bailey and ran into an issue with adding a Router. in IE it describes the error as : SCRIPT5007: Unable to get value of the property 'extend': object is null or undefined (in IE)
Uncaught TypeError: Cannot call method 'extend' of undefined (in Chrome)
I did read this question : uncaught-typeerror-cannot-call-method-extend-of-undefined
The code in question is here:, but I did verify that underscore was loaded in the html of the page via HTTPWatch. Also, about 100 lines earlier in the same file, I invoke underscore for another method. Code is spot on with what is in the tutorial as far as I can tell.
ImageGallery.Router = Backbone.Router.extend({
routes: {
"images/:id": "showImage"
},
initialize: function (options) {
this.collection = options.collection;
},
showImage: function (id) {
var image = this.collection.get(id);
ImageGallery.showImage(image);
}
});
Any insights would be appreciated.
I put the rest of the backbone code on JSFiddle here http://jsfiddle.net/poundingCode/4ekU3/ b/c it was too hard to format.