I've just updated backbone.marionette from 0.9.3 to v1.0.0-beta4 and the following code is breaking:
PlansApp.CompositeView = Backbone.Marionette.CompositeView
PlansApp.ItemView = Backbone.Marionette.ItemVie
PlansApp.Plans.PlansList = do ({PlansApp, Backbone} = window) ->
PlansList = {}
PlansListItemView = PlansApp.ItemView.extend
initialize: ->
#bindTo this.model, "change", this.modelChanged
modelChanged: (model, value)->
this.render()
this.$el.effect("highlight", {}, 6000)
window.addTeachMeHandlers() if model.get 'IsFirst
It is specifically breaking on this.render() with the error message:
Uncaught TypeError: Object [object Object] has no method 'render'
This code previously used to work before the upgrade.
From looking at the source, ItemView still has a render method, so I am guessing the context is wrong or maybe bindTo has changed.
I upgraded underscore also to 1.4.1 from 1.3
in one of the previous versions, I had to change how the EventBinder was attached to the view in order to avoid a conflict w/ the Backbone.StickIt plugin. This change means the default context of the event bindings is no longer the view, and you'll have to specify the 4th parameter - the context - when calling bindTo. It works the same as Backbone's on method:
#bindTo this.model, "change", this.modelChanged, this
Related
I'm trying to add a content script to a tab when the tab loads, but my code is throwing
TypeError: window.QueryInterface is not a function'
when I run the attachTo method.
var attachTo = require('sdk/content/mod').attachTo;
var style = require('sdk/stylesheet/style');
tabs.on('ready', function(tab) {
var worker = tab.attach({
contentScriptFile: ['./content.js']
});
var s = style.Style({
uri: './style.css'
});
attachTo(s, tabs.activeTab.window); <------------ causes the error
array.add(pageWorkers, worker);
mainListener(worker);
});
Any ideas?
The error message suggests that attachTo expects an XPCOM object. activeTab.window returns a wrapper object around the native window. The high level APIs of the sdk generally deal in javascript wrapper objects that hide most of the internals.
You can use modelFor and viewFor to convert between those.
I know that the error is generated by jQuery. Is there any way I can structure a backbone.marionette application to avoid the below error?
Uncaught TypeError: Cannot call method 'show' of undefined
The error occurs because I create a Layout, which has regions. In the onRender function I load a collection and execute fetch. When the fetch is complete, I populate the region. If I switch to a different view, the error is triggered because of self.content.show which no longer exists.
var view = Marionette.Layout.extend({
template: _.template(tplPage),
className: 'customers-view',
regions:{
content: '.customers-content'
},
onRender: function(){
var self = this,
colCustomers = new ColCustomers();
colCustomers.fetch({success: function(){
self.content.show(new ViewCustomersList({collection: colCustomers}));
}});
}
});
NOTE: At the moment I wrap self.content.show() in a try catch and its working. Ideally I avoid that.
Modify the onRender function and listen for the fetch differently.
onRender: function(){
var colCustomers = new ColCustomers();
this.listenTo(colCustomers, "sync", function () {
this.content.show(new ViewCustomersList({collection: colCustomers}));
});
colCustomers.fetch();
}
What I did was change the approach to binding the event listener. By using the listenTo function from Backbone.Events, you get handlers that are cleaned up for free when the listener object dies.
I've been following the cloudedit tutorial http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/ for adding backbone to my rails app, but I'm using rails 3.1.3 rather than 3.0.
I keep getting the following errors
Uncaught TypeError: Cannot call method 'extend' of undefined
application.js:7Uncaught TypeError: undefined is not a function
I believe the error is caused by the following code
var App = {
Views: {},
Controllers: {},
Collections: {},
init: function() {
new App.Controllers.Recipes();
Backbone.history.start();
}
};
which is pretty much right from the tutorial.
I currently have this code in assets/javascripts/application.js file, underneath the section where I include the directories, and I call
$(function(){
App.init();
});
in my application.html.erb file.
the line which the error is actually referring to is
App.Controllers.Recipes = Backbone.Controller.extend(
I've tried moving the var App around to different files, but i can't seem to get it to work.
Am I understanding that error correctly? Is there something else I may be missing?
Are you using a version of Backbone >= 0.5.0 if so there is no Controller object anymore. It's been renamed to Router.
I've been struggling through my first Backbone app and have started to get the hang of things. I now have a few successful reports that load JSON data from my server (NodeJS), populate a template (Handlebars), and render relatively nicely on the frontend.
The issue I'm running into is that I'm trying to add event handlers to a <select> object coming in from one of my templates and I'm not having much luck.
Here's the template:
// Report - New Clients
script(type='text/x-handlebars-template', id='newClients-template')
// Start Listing
{{#each report}}
.listingName
.youSearched
| Stylist:
.srchResult
select.chzn-select(id='stylists', style='width:350px')
option(value='null') All Stylists
{{#each stylists}}
option(value='{{uid}}') {{name}}
{{/each}}
.clear
And here's the Backbone View:
note: I'm calling the view from within a $ -> so it shouldn't be loading until DocumentReady
# View
class window.NewClientsView extends Backbone.View
events:
'click #stylists': 'selectStylist'
initialize: ->
#el = $('.containerOuter')
_.bindAll this, 'render'
#collection.bind 'reset', #render
# Compile Handlebars template at init (Not sure if we have to do this each time or not)
source = $('#newClients-template').html()
#template = Handlebars.compile source
# Get the latest collections
#collection.fetch()
render: ->
# Render Handlebars template
renderedContent = #template { report: #collection.toJSON() }
$(#el).html renderedContent
return this
selectStylist: (e) ->
console.log 'hit it!'
console.log e
I'm expecting that any time the dropdown is clicked or changed, I'll see the selectStylist function fired. Unfortunately that hasn't happened yet :( I also have inspected the element in Chrome Dev Tools and there are no event listeners set on the object.
I've been stuck on this for a bunch of hours now and have reviewed all the other suggestions for Backbone event listeners (i.e. pass in your this.el as a parameter when instantiating your view), but haven't had any success.
Any help or ideas would be appreciated!
In initialize, you write
#el = $('.containerOuter')
But Backbone.js processes events before initialize—meaning that it's already bound those events to a different #el (which you should see in the DOM as a lonely div).
You can hack this by overriding make, the function that's used to create #el:
make: ->
$('.containerOuter')[0]
I have page that creates a table: http://gupii.co.uk/rap/weekTable.php and I'm using a plugin to add a filter functionality: _http://gupii.co.uk/rap/js/mylibs/tablefilter.js
In weekTable.php:
var theTable = $('#weekTable')
$("#filter").keyup(function() {
$.uiTableFilter( theTable, this.value );
})
This works fine when your directly on the weekTable page, but when I load the page into a JQueryUI tab and try and use the filter I get this error:
Uncaught TypeError: Object function ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
} has no method 'uiTableFilter'
Whats going on here, why am I getting this error?
The page I'm trying to load into is _http://gupii.co.uk/rap/guilda.php (tab:This Week) if it helps
(apologies for posting more links than I should but I thought it would be helpful in diagnosing the problem)
Try this:
$("#filter").live("keyup", function() {
...
http://api.jquery.com/live/