In my app, I am using Marionette the extension of Backbone. I installed backbone + marionette with using NPM and Browserify. I am getting as a first error as :
Uncaught TypeError: Cannot read property 'extend' of undefined
driver.js
require('./setup.js');
var Backbone = require('backbone');
var Marionette = require('backbone.marionette');
var TodoList = Backbone.Marionette.LayoutView.extend({
el: '#app-hook',
template: require('./app/templates/layout.html')
});
var todo = new TodoList({
model: new Backbone.Model({
items: [
{assignee: 'Scott', text: 'Write a book about Marionette'},
{assignee: 'Andrew', text: 'Do some coding'}
]
})
});
todo.render();
compile project with command browserify driver.js -t node-underscorify -o static/app.js Whithout errors.
Please any help me. Thank you.
Can you confirm the version of Marionette you are using? If it's version 3 LayoutView was removed and you should use View instead:
var TodoList = Backbone.Marionette.View.extend({
el: '#app-hook',
template: require('./app/templates/layout.html')
});
You can read about more changes in their upgrade guide.
Related
I'm building a little app and can't figure out why I'm getting an error when trying to add to a collection. Here's the code:
var PollCollection = Backbone.Firebase.Collection.extend({
model: Poll,
url: 'https://***.firebaseio.com/polls',
});
var Poll = Backbone.Model.extend({
defaults: {
title: 'title',
}
});
var pollCollection = new PollCollection();
pollCollection.create({title: "test"});
Any ideas? Thanks!
If I move the model up above the collection everything works fine
I'm trying to figure out how to test backbone using jsdom and nodeunit as the testing framework.
I've got the error: "Error: Calling node's require("text") failed with error: Error: Cannot find module 'text'"
What means, that the context was not able to load requirejs-text plugin.
I've created the DOM context witn:
var assert = require('assert');
var fs = require('fs');
var index_html = fs.readFileSync(__dirname + '/../static/index.html', 'utf-8');
var requirejs = require('requirejs');
var jsdom = require('jsdom');
// require('amdefine/intercept');
var jQuery = require('jquery');
On the test setUp, on trying to open up the backbone view:
exports.setUp = function(callback){
var document = jsdom.jsdom(index_html);
var window = document.parentWindow;
jsdom.getVirtualConsole(window).sendTo(console);
requirejs.config({
baseUrl: __dirname + '/',
packages: [{
name: 'text',
location: '../node_modules/requirejs-text/text.js ',
main: 'text.js'
},
],
});
requirejs([__dirname + '/../lib/views/stackoverflow.js'], function(bb){
callback();
});
};
The exception is raised on before the callback is called. The view that I'm using is just a regular view using requirejs-text to load the template. I've also created a GitHub Repository just to better explain the issue. Just clone it, enter the project dir and type make. It should reproduce all the steps that I've did.
Thanks in advance!
In the following code, I am trying to trigger an event using dynamic require. For some reason I am not able to access app object in the eventRouter method. I am getting "TypeError: app is undefined" error. I have implemented listener on show event in respective controller files.
My question is similar to this post except my listeners are in different controller files and I am not able to access app object as suggested in the post.
Help appreciated !!!!
define(["app",
"tpl!templates/nav/nav.tpl",
"tpl!templates/nav/navMenuItem.tpl",
"entities/navEntity"
],
function(app, navTpl, navMenuItem, navEntity){
navMenuItem = Backbone.Marionette.ItemView.extend({
template: navMenuItem,
events: {
"click a": "eventRouter"
},
eventRouter:function(ev)
{
var that = this;
var moduleName = $(ev.currentTarget).text().toLowerCase();
require(['controllers/' + moduleName + 'Controller'], function(controller){
app.trigger(moduleName + ':show');
});
}
});
navMenu = Backbone.Marionette.CollectionView.extend({
tagName: 'ul',
itemView: navMenuItem,
collection: navEntity.navItems,
});
return {
navMenu: navMenu,
navMenuItem: navMenuItem
}
});
To overcome Circular dependencies you can check the Following :
https://stackoverflow.com/a/4881496/2303999
Manage your modules accordingly and avoid dependencies. Make common js file for functions you use use now and then. You can even use Marionette Vent object to pass events and do according on that event.
I will explain my problem with an example. I can make this piece of code work without any problem (using MarionetteJS v1.6.2):
http://codepen.io/jackocnr/pen/tvqHa
But when I try to use it with requireJs and I put it on the initialize method of a Marionette Controller, I'm Getting the following error:
Uncaught TypeError: undefined is not a function backbone.marionette.js:2089
The Error comes when I define the collection view:
var userListView = new UserListView({
collection: userList
});
I Can't figure out what is happening (this is the same code of the link above, but inside the controller initialize method)
define([
'jquery',
'underscore',
'backbone',
'marionette'
], function($,_,Backbone,Marionette){
var Controller = Backbone.Marionette.Controller.extend({
initialize: function(){
var User = Backbone.Model.extend({});
var UserList = Backbone.Collection.extend({
model: User
});
var UserView = Backbone.Marionette.ItemView.extend({
template: _.template($("#user-template").html())
});
var UserListView = Backbone.Marionette.CollectionView.extend({
tagName: "ul",
itemView: UserView,
initialize: function() {
this.listenTo(this.collection, "add", this.render);
}
});
// instances
var jack = new User({name: "Jack"});
var userList = new UserList(jack);
var userListView = new UserListView({
collection: userList
});
// add to page
$("#user-list").append(userListView.render().el);
$("#add-user").click(function() {
var andy = new User({name: "Andy"});
userList.add(andy);
});
},
});
return Controller;
});
instead of using Backbone.Marionette in main.js shim : { use Marionette
marionette: {
exports: 'Marionette',
deps: ['backbone']
},
Thus while declaring any marionette inheritance juste use Marionette instead of Backbone.Marionette as such
var Controller = Marionette.Controller.extend
var UserView = Marionette.ItemView.extend
var UserListView = Marionette.CollectionView.extend
For some reason the newer version or Marionette.js behave this way. I guest it produce less code.
I have replaced the Marionette 1.6.2 version with the 1.5, and now it works as it does the version without requireJs. So I think it's a release bug or something like that.
Seems to be working fine for me. I made a simple project here.
I'm pretty new to backbone and I'm reading, following its example to create a todo list. I can't figure out why this piece of code does not work:
var Todo= Backbone.Model.extend({
defaults: {
title : "",
completed : false
},
initialize: function(){
console.log("model initialized");
this.on("change", function(){
console.log("values for this model have changed.");
});
}
});
var todo1= new Todo();
the libraries I've included are jquery, underscore and backbone. What's wrong with this? Why ".on" is not available? Thanks
on was only included in Backbone 0.9.0. You need to update it.