I'm playing around with backbone.js for the first time, but can't get the events to fire properly. Can somebody explain what I'm doing wrong?
Much appreciated!
in app.js loaded at the bottom of my html:
var Discussion = Backbone.Model.extend({
defaults: {
id: null,
title: 'New discussion'
},
urlRoot: '/api/discussion'
});
var DiscussionCollection = Backbone.Collection.extend({
model: Discussion,
url: '/api/discussion'
});
var DiscussionView = Backbone.View.extend({
events: {
'click .btnCreateDiscussion': 'create',
'keypress #discussion_title': 'create'
},
initialize: function(){
//this.$el = $("#form_discussion");
this.template = _.template( $('#discussion-template').html() );
},
render: function(){
console.log("rendering");
return this;
},
create: function(){
console.log('creating a new discussion')
}
});
var discussionView = new DiscussionView({ el: $("#form_discussion"), model: Discussion });
html:
<form action="" id="form_discussion" method="post">
<label for="discussion_title">Discussion Title</label>
<input type="text" id="discussion_title" name="discussion_title" />
<input class="btnCreateDiscussion" type="button" value="Create Discussion">
<script type="text/template" id="discussion-template">
<h1><%= title %></h1>
</script>
It seems to work fine: http://jsfiddle.net/Jbahx/. (check your backbone & underscore versions, and make sure the DOM is initialized)
About what you're doing wrong though:
model: Discussion when instantiating your view. You have to give the view an instance of a model, not a class. If you give the view a model (optional), it's generally because you want to represent the data of a particular instance.
Your render method is never called, but it's useless at the moment so that's not that big a problem.
this.template = _.template( $('#discussion-template').html() ); in the initialize method. Put this as a property of the view when extending so it'll be put in the prototype of your view (even if it seems to be a singleton here): template: _.template( $('#discussion-template').html() ),.
The problem was jQuery. The most recent 1.x release didn't work, but using the most recent 2.x release fixes the problem. It would be useful if anyone could explain why we should only use 2.x in this case?
First of all, you must call Backbone.View.prototype.initialize in your overriden method to let Backbone initialize event listeners:
initialize: function(){
//this.$el = $("#form_discussion");
this.template = _.template( $('#discussion-template').html() );
Backbone.View.prototype.initialize.call(this)
},
Second, render view in initialize - it isn't best practice. Use for this separate render method.
Related
I'm trying to use the backbone.stickit library to bind my form input to the model but can't seem to get the model to update correctly.
The keyup event appears to work correctly, i can see the value change if i use the "onSet" callback to display it:
bindings: {
'#firstName': {
observe: 'firstName',
onSet: function(val, options) {
$('#output').html(val);
}
}
}
Here is my code (Run it on jsfiddle):
HTML
<div id="view">
<form name="form" id="form">
<input id="firstName" type="text"/>
<input type="submit" id="submit"/>
</form>
<div id="output"></div>
</div>
JavaScript
var app = {
Model: Backbone.Model.extend({
firstName: 'test'
}),
View: Backbone.View.extend({
el: "#view",
initialize: function(){
this.model = new app.Model();
this.render();
},
bindings: {
'#firstName': 'firstName'
},
render: function(){
this.$el.html( this.template );
this.stickit();
},
events: {
"submit #form": "submitForm"
},
submitForm: function(e) {
e.preventDefault();
$('#output').html('output:'+this.model.firstName);
}
})
};
var view = new app.View();
The way of getting a model attribute is usally not by accessing the attribute name as an object property, the way you did it this.model.firstName. personally I know a very few cases of such implemntation. The so called right way to do that is by using get method:
this.model.get("firstName").
This will return the current model value.
I usually define getters and setters for each model I use, so I would do the following:
getFirstName: function(){
return this.get("firstName");
}
Just looks better and more "easy on the eyes" :) (but totally not a must)
Here's an update of your fiddle: http://jsfiddle.net/srhfvs8h/1/
I'm trying to setup a little app in backbone where I can add items to a list and, when I click them, they'll be deleted. I've managed to add items to the list but when using model.destroy() nothing happens.
When I console.log the click event on the list models I get:
child {cid: "c0", attributes: Object, _changing: false, _previousAttributes: Object, changed: Object…}
for any item I click.
Code is below:
Html:
<h1>INDEX!</h1>
<form class="add-form">
<input type="text" name="name"/>
<hr />
<button type="submit" class="btn">Submit</button>
</form>
<h2>LIST STUFF</h2>
<ul class="blah">
{{#each indexCollection}}
<li class="li-class">{{name}}</li>
{{/each}}
</ul>
Javascript:
//Local Storage
App.Storage.Local = new Backbone.LocalStorage('localIndexList1-backbone');
//Index Model
App.Models.IndexModel = Backbone.Model.extend({
localStorage: App.Storage.Local,
defualts:{
name:''
},
urlRoot: '/'
});
//Index Collection
App.Collections.IndexCollection = Backbone.Collection.extend({
localStorage: App.Storage.Local,
model: App.Models.IndexModel,
initialize: function(){
console.log('Collection initialised');
},
url: '/'
});
//View for H1 and input form
App.Views.IndexView = Backbone.View.extend({
el: '.page',
events:{
'submit .add-form' : 'addNew',
'click' : 'deleteMe'
},
initialize: function(){
console.log('IndexView initialised');
},
addNew: function(ev){
// ev.preventDefault();
var submitEntry = $(ev.currentTarget).serializeObject();
var newEntry = new App.Models.IndexModel();
newEntry.save(submitEntry, {
success: function(newEntry){
// router.navigate('', {trigger: true});
console.log('SUCESSS!!!!!!!!!');
}
});
},
deleteMe: function(){
console.log(this.model);
//Whatever I put here will not work
}
});
//View for list
App.Views.ListView = Backbone.View.extend({
el: '.page',
initialize: function(){
console.log('ListView initialised');
},
template: Handlebars.compile($('#list').html()),
render: function(){
this.$el.html(this.template);
var that = this;
var indexCollection = new App.Collections.IndexCollection();
indexCollection.fetch({
success:function(indexCollection){
that.$el.html(that.template({indexCollection: indexCollection.toJSON()}));
}
});
}
});
Would anyone be able to help letting me know where I am going wrong?
Thanks!
Where are you creating one IndexView for each of your collection models? You should have an item view, configure its model to be one IndexModel, and move your delete code to that particular view. When you do that, you should also call remove in this item view.
This is why something like Backbone.Marionette helps a lot. Just throw in a CollectionView and you're done.
Think of it like this:
"list view" -> has a collection
"item view" -> has a single model
Anything you need to on the collection level (like adding a new one, re-loading, whatever), do it on your list view. Anything you need on model level (editing, saving, deleting), do it on your item view.
I read this one but since there was no answers and the question seems to irrelevant. I would like to ask it here again. I did exactly as the backbone documentation page instructs, but gained no results. Can someone help me point out what went wrong here?
The code as following:
App.View.Task = Backbone.View.extend({
tagName: 'li',
template: _.template($("#taskTemplate").html()),
event: {
'click #edit': 'editTask'
},
editTask: function() {
alert("test");
},
render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
}
})
the index.html page looks like this:
<script id="taskTemplate" type="text/template">
<button class="edit">edit</button> <button>delete</button>
</script>
You have #taskTemplate in your JS, but newe1 in your HTML.
Ignoring my typo when specify the element ID in the view, I found that the reason for Backbone not firing the event is because I load the script before that element.
So I'm checking out the changes related to the latest backbone/underscore version. Prior I have a project running with BB 0.5.2 and underscore 1.1.7. I'm noticing something strange with regards to defining a template property within a view in the new version, which gives me reservations in going forward with upgrading.
In my current version I would define a view as such:
var MyView = Backbone.View.extend({
template: _.template($('#exampleTemplate').html()),
initialize: function() {...},
render: function() { $(this.el).html(this.template(someObjectParam)); },
});
However, if I attempt to work in the same manner, using a simplified todo clone attempt as an example, I setup an html with an inline script template as such:
<script>
$(document).ready(function() {
app.init();
});
</script>
<script type="text/template" id="itemViewTemplate">
<div class="item">
<input type="checkbox" name="isComplete" value="<%= item.value %>"/>
<span class="description"><%= item.description %></span>
</div>
</script>
In my included JS file I have:
var ItemView = Backbone.View.extend({
el: 'body',
// Below causes error in underscore template, as the jquery object .html() call
// returns null. Commenting will allow script to work as expected.
templateProp: _.template($('#itemViewTemplate').html()),
initialize: function() {
// Same call to retrieve template html, returns expected template content.
console.log($('#itemViewTemplate').html());
// Defining view template property inside here and calling it,
// properly renders.
this.template = _.template($('#itemViewTemplate').html());
this.$el.html(this.template({item: {value: 1, description: 'Something'}}));
},
});
var app = {
init: function() {
console.log('Fire up the app');
var itemView = new ItemView();
}
}
So I'm left confused as to why defining the template property directly causes the call to retrieve the template html to return a null value, thus breaking the attempt to define an underscore template object (mouthful). However, if the definition is done within the initialize function, the call to retrieve the template html properly finds the template so its contents can be passed to the underscore template. Anyone see what I'm potentially missing?
Thanks in advance!
If this:
var ItemView = Backbone.View.extend({
//...
templateProp: _.template($('#itemViewTemplate').html()),
//...
});
is failing because $('#itemViewTemplate').html() is null, then you have a simple timing problem: you're trying to read the content of #itemViewTemplate before it exists. Your old version should suffer from exactly the same problem.
Either make sure everything is loaded in the right order (i.e. your views after your template <script>s) or compile the template in your view's initialize. You can check for the templateProp in your view's prototype and only compile it on first use if you want:
initialize: function() {
if(!this.constructor.prototype.template)
this.constructor.prototype.template = _.template($('#itemViewTemplate').html());
//...
}
Demo: http://jsfiddle.net/ambiguous/HmP8U/
From the backbone documentation:
All views have a DOM element at all times (the el property), whether they've already been inserted into the page or not.
I have following very simple javascript file:
CBBItem = Backbone.Model.extend(
{
});
CBBTrackItem = Backbone.View.extend(
{
template: _.template("<span><%= title %></span>"),
initialize: function()
{
_.bindAll(this, "render");
},
render: function()
{
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
And a html page like this:
<script type="text/javascript">
$(function()
{
var itm1 = new CBBItem({ title: 'track 1'});
var itmUI1 = new CBBTrackItem({ model: itm1, id: "kzl" });
itmUI1.render();
});
</script>
<body>
<div id="kzl"></div>
</body>
My view item doesn't want to render although there is a created div on the page. I can trick the situation in many ways. For example doing something like this
var itm1 = new CBBItem({ title: 'track 1'});
var itmUI1 = new CBBTrackItem({ model: itm1, id: "big_kzl" });
$(itmUI1.render().el).appendTo("#kzl");
But, why is the main case not working?
Here's one possibility: you aren't setting the el for the view, so it doesn't know what to do with your template. Could you modify your view-calling code to look like this?
var itmUI1 = new CBBTrackItem({
model: itm1,
id: "big_kz1",
el: "#kz1"
});
itmUT1.render();
Alternatively, you could set the el value within the initialize of the view if the value never varies. The advantage to doing so is that callers of the view don't have to know this information and thus the view is more self-contained.
If the document already has the element you want to use as el for a particular view, you have to manually set that dom element as the el attribute when the view is initialized. Backbone provides you no shortcut for doing that.
I've experienced problems when passing values like ID and events in during construction as opposed to defining them during extension. You may want to check and see if that's the difference you're looking for.