backbone-froms multiple views submit a form - backbone.js

I have a master view App.MainView (table view), a App.TaskView (row view) and using backbone forms to add and edit the records. Here is my code:
App.MainView = Backbone.View.extend({
template: $("#home-template").html(),
initialize: function() {
_.bindAll(this, 'render');
this.listenTo(tasks, 'add change', this.addOne);
this.subViews = [];
},
addOne: function(model) {
var view = new App.TaskView({model: model});
this.$('tbody').append(view.render().el);
},
render: function() {
var template = _.template(this.template);
this.$el.append(template);
//this.$el.find("#filter").append(this.createSelect());
var self = this;
this.collection.fetch({
wait: true,
success: function(model, response) {
var TasksLen = model.length;
for (var i = 0; i < TasksLen; i++) {
var taskView = new App.TaskView({
model: model.models[i]
});
//self.subViews.push(taskView);
$('#record-list-table', this.el).append(taskView.render().el);
}
}
});
},
Now my TaskView:
App.TaskView = Backbone.View.extend({
tagName: 'tr',
template: _.template($('#record-template').html()),
initialize: function() {
var self = this;
},
events: {
"click .edit": "editrecord",
},
render: function() {
this.$el.html(this.template(this.model.toJSON()))
return this;
},
editrecord: function() {
form.setValue(this.model.toJSON());
}
and my Form and submit button
var form = new Backbone.Form({
model: task
});
window.form = form;
$('#form').html(form.render().el);
$('#submit-btn').click(function() {
var data = form.getValue();
form.commit();
task.save(data, {wait: true,
success: function(task, response) {
tasks.add(task);
}
});
Templates:
<script type="text/template" id="home-template">
<table id="recordtable">
<input type='reset' id="reset-btn" onclick="reset()" class="add-new" value='' name='reset' /></table></script>
<script type="text/template" id="record-template">
<td id="edit-name" class="edit"> <%- name %></td>
<td class="edit date" class="edit"> <%- due_date %></td>
</script>
I have two issues:
On model change,it adds another model (However it does the put request and updates in database but on front end backbone adds a new row in the table instead of updating the previous row). But after page refresh it shows correct data. Looks like some issue with change event.
I want to create direct route to a task i.e task/id and want to highlight that task in the table and edit it in the form. Right Now I am able to edit any model on click in the form but I want to have direct route too.

I think now I found the problem of your code. You are doing
tasks.add(task);
in success method of model save. But I think you need to re render the task.
1. You can bind a change event in taskview so that it will render task with updated value.
2. You can add a function in your taskview like this
refresh: function(){
this.render();
}
and you can call this function after model.save success found.

Related

Calling variables within Underscore template

Im trying to make an Underscore template in my Backbone application, but my scoping must be off or something, because Underscore thinks my variable is not defined. Im getting "Uncaught ReferenceError: dictionary is not defined."
Here is the template code:
<script type="text/template" id="new_template">
<table class="table striped">
<tbody>
<% _.each(dictionary, function(user){ %>
<tr>
<td> <%= user.get('word')%></td>
<td> <%= user.get('definition')%></td>
</tr>
<% }) %>
</tbody>
</table>
</script>
And here is the logic in app.js that defines my inline template variable calls:
(function($){
//---------SINGLE ENTRY MODEL----------
var Entry = Backbone.Model.extend({
defaults: function(){
return{
word: '',
definition: ''
}
}
});
//------------ENTRY MODEL COLLECTION------------
EntryList = Backbone.Collection.extend({
model: Entry
});
//-----INSTANCIATE COLLECTION----
var dictionary = new EntryList();
var saved = new EntryList();
//-----SINGLE ENTRY VIEW------
var EntryView = Backbone.View.extend({
model: new Entry(),
tagName:'div',
className: 'singleEntry',
events:{
'click .edit': 'edit',
'click .delete': 'delete',
'keypress .definition': 'updateOnEnter',
'click .save': 'save'
},
initialize: function(){
// this.template = _.template($("#dictionary_template").html());
this.template = _.template($("#new_template").html());
},
delete: function(ev){
ev.preventDefault;
dictionary.remove(this.model);
saved.remove(this.model);
},
edit: function(ev){
ev.preventDefault;
this.$('.definition').attr('contenteditable', true).focus();
},
save: function(ev){
ev.preventDefault;
saved.add(this.model);
dictionary.remove(this.model);
saved.comparator = 'word';
console.log(this.model.toJSON());
},
close: function(){
var definition = this.$('.definition').text();
this.model.set('definition', definition);
this.$('.definition').attr('contenteditable', false).blur();
},
updateOnEnter: function(ev){
if(ev.which == 13){
this.close();
}
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
//--------------DICTIONARY VIEW------------
var DictionaryView = Backbone.View.extend({
model: dictionary,
el: $('#entries'),
initialize: function(){
this.model.on('add', this.render, this);
this.model.on('remove', this.render, this);
},
render: function(){
var self = this;
self.$el.html('');
_.each(this.model.toArray(), function(entry, i){
self.$el.append((new EntryView({model: entry})).render().$el);
});
return this;
}
});
//---------SAVED ENTRY VIEW-----------
var SavedView = Backbone.View.extend({
model: saved,
el: $('#saved'),
initialize: function(){
this.model.on('add', this.savedRender, this);
this.model.on('remove', this.savedRender, this);
},
savedRender: function(){
var self = this;
self.$el.html('');
_.each(this.model.toArray(), function(entry, i){
self.$el.append(new EntryView({model: entry}).render().$el);
});
return this;
}
});
//---------TEST VIEW------------------
var TestView = Backbone.View.extend({
el: $('#saved'),
render: function(){
this.$el.html('new event route');
}
});
//-------BINDING DATA ENTRY TO NEW MODEL VIEW-------
$(document).ready(function(){
$('#new-entry').submit(function(ev){
var entry = new Entry({word: $('#word').val(), definition: $('#definition').val() });
dictionary.add(entry);
dictionary.comparator = 'word';
console.log(dictionary.toJSON());
$('.form-group').children('input').val('');
return false;
});
var appView = new DictionaryView();
var savedView = new SavedView();
});
//--------------ROUTER----------------
var Router = Backbone.Router.extend({
routes:{
'':'home',
'new': 'newEvent'
}
});
var router = new Router();
router.on('route:home', function(){
console.log('router home');
router.on('route:newEvent', function(){
console.log('router new');
var testView = new SavedView();
})
});
Backbone.history.start();
})(jQuery);
Update
The way Underscore templates work (once you compile them) is by replacing any non JavaScript keywords they find in ERB-style delimiters (the bee-stings: <% %>) with the values in the object passed in to the compiled template. In your sample code, Underscore is expecting an object with a property named 'dictionary', for example.
The way your template is set up right now, it's expecting a collection (EntryList) of models with the words and definition attributes. However, if you look at your code,
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
is the only time populate your template, in your Entry view, which does not take a collection, but an Entry model.
What you really want to do is to get rid of the for each loop in your template, and let it simply render the model. I would rewrite it like this,
<script type="text/template" id="new_template">
<tr>
<td> <%= word %></td>
<td> <%= definition %></td>
</tr>
</script>
Now, I hope that el in dictionary view is a <tbody>. If it is, then these models will comfortably park their <tr> where they have to go and you can call it a day.
Looking at the defaults of the Entry model it looks like all you'll be populating that model with is { word: '', definition: '' }. In your template, underscore is looking for a variable called dictionary. Yet, you pass an object with the variables word and definition in to the template.
More importantly, I am not sure your view building logic makes compete sense. You're building child views out of EntryView in your DictionaryView and then you run a for each loop in your template?

Nested views in Backbonejs, a post & comments relation

Array Of Objects
The data is received from server
var Updates = [
{"post_id":"1","post_desc":"This is my first post",
"comments":[{"id":1,"comment":"some comments","like":7},
{"id":9,"comment":"some comments","like":3}
]
},
{"post_id":"2","post_desc":"This is my second post",
"comments":[{"id":5,"comment":"some comments","like":5}]
}]
Model:
var Update = Backbone.Model.extend({
defaults:{
photo: "default.png"
}
});
Collection:
var latestUpdates = Backbone.Collection.extend({
model: Update
});
Single View:
var UpdateView = Backbone.View.extend({
tagName: "div",
className: "post-container",
template: $("#postTemplate").html(),
render: function () {
var tmpl = _.template(this.template);
this.$el.html(tmpl(this.model.toJSON()));
return this;
}
});
Master view:
var UpdatesView = Backbone.View.extend({
el: $("#postContainer"),
initialize: function () {
this.collection = new latestUpdates(Updates);
this.render();
},
render: function () {
var that = this;
_.each(this.collection.models, function (item) {
that.renderUpdates(item);
}, this);
},
renderUpdates: function (item) {
var updateView = new UpdateView({
model: item
});
this.$el.append(updateView.render().el);
}
});
//create app instance
var wallUpdates = new UpdatesView();
How can I render comments section under each post?
Trying to achieve layout similar to facebook post-comment system
I'd use a CommentListView, owned by your UpdateView. tagName: "ul", className: "post-comments"
Then have a CommentView owned by the CommentListView. CommentView's render should not append anything to the DOM, but return its $el.
CommentListView would tell each of the CommentView's to render, appending each of their $el's to the CommentListView's $el.
For the containers, I'd use:
<div class="post-container" data-post-id="<%= YourPostId %>">
<div class="post-body">
<!--Your post can go in here-->
</div>
<ul class="post-comments">
<!--Append your comments in here-->
</ul>
</div>

Event triggered in all instances of Backbone.View

I'm displaying a table of categories with Backbone. I created two views:
RowView (containing a single tr)
TableView (containing table structure)
The definitions:
RowView = Backbone.View.extend({
el: "#content table tbody",
initialize: function() {
this.render();
},
render: function(){
var params = { name: this.model.get('name'), route: this.options.route };
var template = _.template( $("#rowTemplate").html(), params);
this.$el.append(template);
},
events: {
"click #name": "clickHandler"
},
clickHandler: function( event ) {
console.log('Browse subcategories of ' + this.model.get('name'));
}
});
TableView = Backbone.View.extend({
el: "#content",
initialize: function(){
this.render();
},
render: function(){
var row = new this.collection();
var that = this;
row.fetch({
success: function() {
console.log('Collection fetch succeeded');
var params = { title: that.options.title,
counter: row.at(0).get('counter'),
route: that.options.route
};
var template = _.template( $("#tableTemplate").html(), params);
that.$el.html( template );
// RowView's are created by iteration here
for(var x = 1; x < row.length; x++) {
var params = { model: row.at(x), route: that.options.route };
var view = new RowView(params);
}
}
});
}
});
As you can see, I've attached a click event at the RowView.
RowView template:
<script type="text/template" id="rowTemplate">
<tr>
<td id="name" class="fill"><%= name %></td>
<td>Editar</td>
</tr>
</script>
Clicking any #name triggers the handler in all instance of the view. So when clicking one category I get:
Browse subcategories of category1 127.0.0.1:68
Browse subcategories of category2 127.0.0.1:68
etc...
As far as I know, that's because all RowView's are delegated to the same el.
The first thing I though about was adding the category name to the rowTemplate and compare the value in the DOM with the value in the view to see which one actually triggers the event.
But that solutions look really ugly. What's the correct way of accomplishing this in Backbone?
EXTRA: Is it considered better if I only create one view, and iterate in the template to generate the rows?
EDIT: I think the provided code is enough. Otherwise I can add them.
you can modify RowView like this :
RowView = Backbone.View.extend({
container: '#content table tbody',
tagName: 'tr',
initialize: function() {
this.render();
},
render: function() {
var params = {
name: this.model.get('name'),
route: this.options.route
};
var template = _.template($("#rowTemplate").html(), params);
this.$el.html(template).appendTo(this.container);
},
events: {
"click .fill": "clickHandler"
},
clickHandler: function(event) {
console.log('Browse subcategories of ' + this.model.get('name'));
}
});
and RowView template:
<script type="text/template" id="rowTemplate">
<td class="fill"><%= name %></td>
<td>Editar</td>
</script>
Backbone.js will create a tr element. then this.$el.html(template).appendTo(this.container) fill the tr element with template and append to #content table tbody.
just like that, RowView's events be delegated on RowView's el, not #content table tbody.
You have more than one element with the same id on your page, due to all of your rows having the
<td id="name" class="fill"> element.
Element IDs should be unique within your document.
One solution would be to distinguish the rows in your template, and use events as a function to set the proper ID.
Template:
<script type="text/template" id="rowTemplate">
<tr>
<td id="name-<%= name %>" class="fill"><%= name %></td>
<td>Editar</td>
</tr>
Events function:
events: function(){
_events = {};
_events["click #name-" + this.model.get('name')] = "clickHandler";
return _events;
}
Try this
RowView = Backbone.View.extend({
container: '#content table tbody',
tagName: 'tr',
// initialize: function() {
// this.render();
// },
render: function() {
var params = {
name: this.model.get('name'),
route: this.options.route
};
var template = _.template($("#rowTemplate").html(), params);
this.$el.append(this.template);
},
events: {
"click .name": "clickHandler"
},
clickHandler: function(event) {
console.log('Browse subcategories of ' + this.model.get('name'));
}
});
RowView template (no need for identifying each row view):
<script type="text/template" id="rowTemplate">
<td class="name"><%= name %></td>
<td>Editar</td>
</script>
Then the table view:
...
that.$el.html( template );
// RowView's are created by iteration here
for(var x = 1; x < row.length; x++) {
var params = { model: row.at(x), route: that.options.route };
var view = new RowView(params);
that.$el.find('tbody').append(view.el);
view.render()
}
...

backbone.js example doesn't run upon page load but does when invoked in debugger

I have a simple backbone.js example I am working on. The problem is upon page load it is not displaying anything on the page. However, in the Chrome debugger console, if I explicitly make a call to the view and it's render() method then the results show up on the screen with the correct json data.
Any help would be really, really appreciated!
var Clients = Backbone.Collection.extend({
model: Client,
url: 'api/Contacts'
});
var clients = new Clients();
var UserItemView = Backbone.View.extend({
tagName: 'li',
template: _.template($('#contacts-template').html()),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
var UserListView = Backbone.View.extend({
el: $('#contacts'),
render: function() {
this.$el.empty();
var self = this;
_.each(this.collection.models, function(model) {
self.renderItem(model);
});
},
renderItem: function(item) {
var itemView = new UserItemView({
model: item
});
this.$el.append(itemView.render().el);
}
});
Here's the code for the index.html page:
<ul id="contacts"></ul>
<script id="contacts-template" type="text/template">
<%= FirstName %> <%= LastName %>
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="scripts/app/app.js"></script>
<script>
$(document).ready(function () {
alert('HI'); // I verified this alert works
clients.fetch();
var userListView = new UserListView({ collection: clients });
userListView.render();
});
</script>
Every asynchronous call should have a callback when it's done, here you're trying to use clients collection before it has data from the server. I would change the code to:
$(document).ready(function () {
alert('HI'); // I verified this alert works
clients.fetch(
success: function() {
var userListView = new UserListView({ collection: clients });
userListView.render();
},
error: function() {
alert('An error has occurred');
},
);
});
Regards,

Event does not bind when adding view dynamically

I have two simple views, one with a button that creates a view and append it to the page. The new view consists of a single list item with a link and an event to I need to bind to each list item. I think the problem here is the el object: What I have been reading the el object should be created automatically when it's not defined on construction of the view? See this fiddle
HTML:
<div id="main">
<button type="button" class="add">Add view</button>
<ul id="tasks" />
</div>
<script id="view-template-new-task" type="text/html">
<li>Task</li>
</script>
​
JS:
var TaskView = Backbone.View.extend({
events: {
'click a.fire': 'fire'
},
fire: function() {
alert('fire');
},
initialize: function() {
this.template = _.template($('#view-template-new-task').html());
},
render: function() {
$('#tasks').append(this.template());
}
});
var View = Backbone.View.extend({
events: {
'click button.add': 'addView'
},
addView: function(e) {
var task = new TaskView();
task.render();
}
});
$(function() {
var view = new View({
el: $('#main')
});
});​
Backbone automatically delegates events to the view element. As is, the el in your TaskView would point to an unattached div (the default el created by Backbone) and not to an element in your list.
The cure is simple : create your subview with its el set to a correct DOM node by setting a tagName to li and appending this element in your main view.
var TaskView = Backbone.View.extend({
tagName: 'li',
events: {
'click a.fire': 'fire'
},
fire: function() {
alert('fire');
},
initialize: function() {
this.template = _.template($('#view-template-new-task').html());
},
render: function() {
this.$el.html(this.template());
return this;
}
});
var View = Backbone.View.extend({
events: {
'click button.add': 'addView'
},
addView: function(e) {
var task = new TaskView();
this.$('#tasks').append(task.render().el);
}
});
And an updated Fiddle http://jsfiddle.net/BLP6J/31/

Resources