I have the following backbone.js view shown below. It was working fine, and now the click event does not execute when the form button is clicked. No errors in console, or any other obvious signs of why is shown.
window.FormOptionView = Backbone.View.extend({
template: _.template($('#test-option').html()),
render: function (eventName) {
$('#test1').append(this.template(this.model.toJSON()));
$('#test2').append(this.template(this.model.toJSON()));
return this;
}
});
window.AddTestView = Backbone.View.extend({
template: _.template($('#test-add').html()),
initialize: function () {
this.collection.bind("reset", this.render, this);
this.render();
},
events: {
"click button": "addTest"
},
addTest: function(event){
event.preventDefault();
var test = new Test({
test1: {
firstName: $("#test1 option:selected").val(),
lastName: $("#test1Score").val()
},
test2: {
firstName: $("#test2 option:selected").val(),
lastName: $("#test2Score").val()
}
});
test.add(result);
app.navigate("tests", true);
},
render: function (eventName) {
$('#content').html(this.template());
_.each(this.collection.models, function (test) {
this.renderSelectBox(test);
}, this);
return this;
},
renderSelectBox: function (item) {
var optionView = new FormOptionView({
model: item
});
$(this.el).append(optionView.render().el);
}
});
The corrosponding HTML
<script type="text/template" id="test-option">
<option><%= firstName %> <%= lastName %></option>
</script>
<script type="text/template" id="test-add">
<form id="addTest" action="#">
<label for="test1">Test1:</label>
<select id="test1">
<option></option>
</select>
<label for="test1Score">Score:</label>
<input id="test1Score" type="number" />
<label for="test2">Test 2:</label>
<select id="test2">
<option></option>
</select>
<label for="test2Score">Score:</label>
<input id="test2Score" type="number" />
<button id="add">Add</button>
</form>
</script>
Without seeing the corresponding HTML, my best guess is that your <button> is outside the scope of your view. Click events are only attached to children of the root element of your View.
Just found the views el tag corresponded to a bunch of empty <div>s. Not to sure why but a simple el: $('#content') managed to fix the problem. Thanks
Your problem, as you've already discovered, is that your view wasn't handling its el properly.
When your view is rendered, Backbone hooks up the events by using jQuery's delegate on the view's this.el.
If you don't explicitly set the el (through the constructor as new V({ el: ... }), in the view's definition as el: ..., or by calling setElement), then the el will be constructed using various view properties as noted in the documentation; the default el is just a simple <div>. This is where your empty <div>s are coming from.
You were doing this:
render: function (eventName) {
$('#content').html(this.template());
_.each(this.collection.models, function (test) {
this.renderSelectBox(test);
}, this);
return this;
}
and somewhere else you were probably doing a simple add_test_view.render(). The result is that the event delegate is bound to the view's el (an empty <div>) and that el is never added to the DOM; if you have delegate bound to something that isn't in the DOM then you never get any events.
If you say el: '#content' in your view definition, then Backbone will use #content as your el and your view would look more like this:
el: '#content',
//...
render: function (eventName) {
this.$el.html(this.template());
this.collection.each(function(test) {
this.renderSelectBox(test);
}, this);
return this;
},
renderSelectBox: function (item) {
var optionView = new FormOptionView({
model: item
});
this.$el.append(optionView.render().el);
}
Notice that I switch to this.collection.each, Backbone collections have various Underscore methods mixed in so you don't have to access collection.models manually; I've also switched to this.$el since view already have a cached jQuery'd version of this.el.
Related
I'm trying to update only a part of a template used by a Backbone view when a collection is updated. The code below successfully executes the search() and render_list() methods. Furthermore, console.log(html) shows the full template's html. But when I execute the replaceWith, it replaces the selector with empty. If I replace $(selector,html) with a string (ie: 'test'), it successfully replaces with 'test'.
So, for some reason, the $(selector, html) selector isn't doing what it's meant to. What is further weird is that the images within the updated html selector are requested by the browser even though none of the updated html is inserted on into the document.
define([
'jquery',
'underscore',
'backbone',
'collections/tracks',
'collections/genres',
'text!templates/search_view_title.html',
'text!templates/search_view.html'
],function($,_,Backbone,Tracks_collection,Genres_collection,Search_view_title_template,Search_view_template){
var Search_view = Backbone.View.extend({
el: $('#app'),
events: {
'change #genre_select': function(){this.search('genre')},
'click #search_btn': function(){this.search('search')}
},
template: _.template(Search_view_template),
initialize: function(){
// SET SOME IMPORTANT LAYOUT SETTINGS
$('#pagetitle').html(_.template(Search_view_title_template));
$('body').css('padding-top','124px');
this.genre_collection = new Genres_collection();
this.listenTo(this.genre_collection,'update',this.render);
this.genre_collection.fetch();
this.collection = new Tracks_collection();
this.listenTo(this.collection,'update',this.render_list);
},
search: function(searchtype){
switch(searchtype){
case 'genre':
console.log('genre changed');
this.collection.fetch({
data: {limit: 30, type:'genre',genre_id:$('#genre_select').val()}
});
break;
case 'search':
console.log('search changed');
this.collection.fetch({
data: {limit: 30, type:'search',keyword:$('#keyword').val()}
});
break;
}
console.log(this.collection);
},
render_list: function(){
var that = this;
console.log('render list');
var html = that.template({genres: this.genre_collection.models,tracks: this.collection.models});
console.log(html);
var selector = '#tracklist';
console.log($(selector,html));
that.$el.find(selector).replaceWith($(selector,html));
return this;
},
render: function(){
// MAKE 'THIS' ACCESSIBLE
var that = this;
console.log('render');
that.$el.find('#container').html(that.template({genres: this.genre_collection.models}));
return this;
}
});
return Search_view;
});
Without the HTML templates in hand, I can just assume things.
This is closer to how I would do it:
var Search_view = Backbone.View.extend({
el: $('#app'),
events: {
'change #genre_select': 'onGenreChange',
'click #search_btn': 'onSearchClick'
},
template: _.template(Search_view_template),
initialize: function() {
// SET SOME IMPORTANT LAYOUT SETTINGS
$('#pagetitle').html(Search_view_title_template);
// Do this in css
$('body').css('padding-top', '124px');
this.genre_collection = new Genres_collection();
this.genre_collection.fetch();
this.collection = new Tracks_collection();
this.listenTo(this.genre_collection, 'update', this.render);
this.listenTo(this.collection, 'update', this.render_list);
},
render: function() {
console.log('render');
this.$('#container').html(this.template({
genres: this.genre_collection.models
}));
return this;
},
render_list: function() {
console.log('render list');
var html = this.template({
genres: this.genre_collection.models,
tracks: this.collection.models
});
console.log(html);
var $selector = this.$('#tracklist');
console.log($selector);
$selector.replaceWith($(html));
return this;
},
////////////
// events //
////////////
onSearchClick: function() {
console.log('search changed');
this.collection.fetch({
data: { limit: 30, type: 'search', keyword: $('#keyword').val() }
});
},
onGenreChange: function() {
console.log('genre changed');
this.collection.fetch({
data: { limit: 30, type: 'genre', genre_id: $('#genre_select').val() }
});
},
});
$('#pagetitle').html(_.template(Search_view_title_template));
The _.template function returns a function, which itself returns the rendered template when called.
It can be confused with this.template which often contains the result of _.template and is ready to be called (this.template(data)).
Split your callbacks, functions are cheap and unnecessary switch are ugly.
I made your search into onGenreChange and onSearchClick.
$('body').css('padding-top','124px');
Try to avoid that, it can be easily done with CSS, or even inline <style> tag or inline style="" attribute. If it's necessary for you as it's related to a dynamic behavior, create a class (e.g. search-class) in a css file, then toggle the class with jQuery, moving the "design" responsability out of the js:
$('body').toggleClass('search-class');
var that = this;
This is only necessary when dealing with callbacks where the context (this) is different in the callback. In Backbone, most of the time, it's avoidable as the context option is often available and automatically set on most (like the events callbacks).
this.$el.find(selector)
This is equivalent to this.$(selector). Just a little shortcut.
.replaceWith($(selector,html));
replaceWith expects a htmlString or Element or Array or jQuery.
$(selector, html) expects a selector and a context. You want $(html) to transform your html string into a jQuery element.
I've got a collection that does a url request,
class Movieseat.Collections.Moviesearch extends Backbone.Collection
url: ->
"http://api.themoviedb.org/3/search/movie?api_key=a8f7039633f2065942cd8a28d7cadad4&query=#{#query}"
setQuery: (q) ->
#query = q
return
I've got a view that renders a template, in the template is a input field. When text is typed in the input field the Collection gets updated with the value and when there's a keyup action in the input field the collection gets fetched.
class Movieseat.Views.Moviesearch extends Backbone.View
template: JST['movieseats/moviesearch']
el: '#moviesearch'
initialize: (opts) ->
{#collection} = opts
#render()
return
render: ->
$(#el).html(#template())
return
events:
"keyup input": "doSearch"
doSearch: (e) ->
inputtext = #$("form#autocomplete-remote input").val()
console.log inputtext
#collection.setQuery $(e.currentTarget).val()
#collection.fetch()
And now I'm trying to render each result in a li element, but I don't know how to do that. What would be the next step for me?
After a little play with your source code I came up with the following solution:
MoviesCollection = Backbone.Collection.extend({
url: function () {
return "http://api.themoviedb.org/3/search/movie?api_key=a8f7039633f2065942cd8a28d7cadad4&query=" + this.query;
},
setQuery: function (q) {
this.query = q;
},
parse: function (response) {
return response.results;
}
});
ResultsView = Backbone.View.extend({
initialize: function (opts) {
this.collection = opts.collection ;
this.collection.on('sync', this.render, this);
},
el: '#result-list',
template: _.template($("#results_template").html()),
render: function () {
var that = this;
this.$el.html(this.template({movies: this.collection.toJSON()}));
}
});
MoviesView = Backbone.View.extend({
initialize: function (opts) {
this.collection = opts.collection;
this.render();
},
pressDelay: 500,
el: "#search_container",
template: _.template($("#search_template").html()),
render: function(){
this.$el.html(this.template());
var resultsView = new ResultsView({collection: this.collection}) ;
resultsView.render();
},
events: {
'keyup input': 'doSearch'
},
doSearch: function (event) {
if (this.timeoutId) {
clearTimeout(this.timeoutId);
}
this.timeoutId = setTimeout($.proxy(this.fetchValues, this), this.pressDelay);
},
fetchValues: function() {
// add check here for empty values, no need to fetch collection if input is empty
var inputtext = this.$el.find('input').val();
console.log (inputtext);
var that = this;
this.collection.setQuery(inputtext);
this.collection.fetch();
}
});
myCollection = new MoviesCollection();
var search_view = new MoviesView({
collection: myCollection
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script type="text/template" id="results_template">
<ul id="search_container-results">
<% _.each(movies, function(movie) { %>
<li class="original_title"><%= movie.title %></li>
<% }); %>
</ul>
</script>
<div id="search_container"></div>
<script type="text/template" id="search_template">
<form id="autocomplete-remote">
<input type="text" id="search_input" value="Star" />
<input type="button" id="search_button" value="Search" />
</form>
<div id="result-list">
</div>
</script>
I have added timeout between input events, to increase queries frequency. You can configure it using pressDelay property of MoviesView.
Take a look at listenTo and the list of built in events.
I think you probably want to listen to the collection's events and call a render method when something changes.
For example, you could add this to your initialize to re-render when the collection is fetched:
this.listenTo(this.collection, 'sync', this.render);
Or you could just render a single item when it's added to the collection:
this.listenTo(this.collection, 'add', this.renderItem);
Suppose that I have the following view:
var SampleView = Backbone.View.extend({
initialize: function() {
this.child_element = this.$('#new-catalog>button:first');
},
events: {
'click #new-catalog>button:first': function() { alert('clicked'); },
},
el: '#some-element',
});
If you have some non trivial selection for custom children items (like my child_element selected with #new-catalog>button:first, is it possible to avoid redefining it in the events property and instead refer to this.child_element?
Of course I can do this.child_element.on('click', ..., but I'd like to use the provided events dictionary.
I hope i am clear enough, otherwise ask me for clarifications.
I would like to delete end create view in agreement to a main template…
I did try the following implementation, unsuccessfully.
// main-template.html
<div id=""project>
<div class="main-template">
<div id="view1"></div>
<div class="foldable-block">
<div id="view2"></div>
<div id="view3"></div>
</div>
</div>
</div>
//mainView.js
define([
"js/views/view1",
"js/views/view2",
"js/views/view3",
"text!templates/main-template.html"
], function (View1, View2, View3, mainTemaplte) {
var MainView = Backbone.View.extend({
initialize: function ()
{
this.$el.html(Mustache.render(mainTemaplte));
this.render();
},
el: $("#project"),
render: function ()
{
var options = this.options;
this.view1 = new View1(options);
this.view2 = new View2(options);
this.view3 = new View3(options);
}
});
return MainView;
});
//view1.js
define([… ], function (..) {
var View1 = Backbone.View.extend({
el: $("#view1"),
initialize: function () {
console.log(this.$el) // []
setTimeout( function () {
console.log(this.$el) // []
}, 2000);
}
});
return View1;
});
The issues as you can see from the comments is in view1.js
(this.$el) // []
from my js console it works:
$("#view1") // <div>….</div>
My goals is:
1) when I load the mainView.js module I would like to create a template to which attach my views (view1, view2, view3)
2) when I trigger delete view, every DOM, to which are attached the view, should be deleted.
3) when I call again the mainView.js module the template should be recreated.
if you have other ideas to suggest, please post.
Thanks to #nikoshr advise this.$el, in view1.j, is defined and when I call render in view1.js the this.$el is fill properly
but it is not attached to the body of document.
How can I make it without using append or similar jquery methods to my main-template.html ?
Here my render function:
render: function ()
{
this.$el.html(Mustache.render(myTemplate, this.view);
}
You are attaching your subviews to elements that do not exist at the time you require them. Something like this may be a step in the right direction:
mainView.js
define([
"js/views/view1",
"js/views/view2",
"js/views/view3",
"text!templates/main-template.html"
], function (View1, View2, View3, mainTemaplte) {
var MainView = Backbone.View.extend({
initialize: function ()
{
this.render();
},
render: function ()
{
// render from template and assign this.el to the root of the element
// e.g #project
var html=Mustache.render(mainTemaplte);
this.setElement( $(html) );
// create each view with its el set to the correct descendant
this.view1 = new View1( _.extend( {el:this.$("#view1")} , this.options) );
this.view2 = new View2( _.extend( {el:this.$("#view2")} , this.options) );
this.view3 = new View3( _.extend( {el:this.$("#view3")} , this.options) );
}
});
return MainView;
});
view1.js
define([… ], function (..) {
var View1 = Backbone.View.extend({
initialize: function () {
console.log(this.$el);
}
});
return View1;
});
And you can recreate your view with something like
require(["js/views/mainView"], function(MainView) {
var view=new MainView();
console.log(view.$el);
//attach the view to the DOM
$("body").append(view.$el);
});
I am right now developing a dead simple application using backbonejs mvc javascript library.Just to show how simple it is here is the html
Sample Html
<div class="container">
<div>
<label>
Name:
<input id="txtName" type="text" title="Type your name please" /></label>
<button id="btnSubmit" type="button" value="Submit">
Submit</button>
</div>
<div id="names">
</div>
</div>
Operation
Here's all i want the application to do.
User Types a name(or some alphanumeric string) and clicks submit.
The value(which is what they call model i suppose) after validation will be sent to restful service.
Service will return the same string along with status of database save operation.
I am now confused as to where the click event will handled(is it in the model?), after that where should the render method be called?(is it in views). Below you will find the script i had managed up until now
Model.js
//store a global reference to model
window["model"] = Backbone.Model.extend({
defaults: { name: "Type your name"
},
validate: function () {
}
});
View.js
//store a global reference to view
window["view"] = Backbone.View.extend({});
nothing in the view to say :(
Application.js
//when every thing is ready kick of the application
$(document).ready(function () {
var modelInstance = new model();
});
so do i add click event to the button in application.js or model.js.which is the convention/best practice?
Will it be possible for me to render the names collection returned from service into #names and status of the database insertion into another div somewhere up above the container? Can the view render both views?
So, here is a disclaimer: If this is all your app is doing, then Backbone is way too much ceremony. When the app gets more complex with more moving parts, Backbone becomes pretty amazing.
That being said, I have created a jsFiddle to highlight how you might use Backbone for what you want to do: http://jsfiddle.net/BrianGenisio/CZwnk/4/
Basically, you have a Person model and a People collection to hold the Person models. You then have three views: NewPersonView which is the form for entering your data, which is responsible for adding new items to the People collection. Then you have a PeopleView view which is responsible for showing People collection, which will watch the collection and show any additions. Finally, is the PersonView which is responsible for showing an individual Person model.
When it all comes together, it looks a little something like this:
HTML:
<script id="new_person_template" type="text/template">
<label>
Name:
<input id="txtName" type="text" title="Type your name please" />
</label>
<button id="btnSubmit" type="button" value="Submit">Submit</button>
</script>
<script id="person_template" type="text/template">
Hello, my name is <%= name %>
</script>
<div id="container">
</div>
JavaScript
window.app = {};
window.app.Person = Backbone.Model.extend({
defaults: { name: "Type your name" },
validate: function () { }
});
window.app.People = Backbone.Collection.extend({
model: window.app.Person
});
window.app.NewPersonView = Backbone.View.extend({
template: _.template($("#new_person_template").html()),
initialize: function () {
_.bindAll(this, 'submit');
},
events:
{
"click #btnSubmit": "submit"
},
render: function () {
$(this.el).html(this.template());
return this;
},
submit: function (x, y, z) {
// If you want this to go up to the server and sync, do this instead:
// this.model.create({name: $("#txtName").val()});
// but since we don't really have a server right now, we'll just create and add
var person = new window.app.Person({name: $("#txtName").val()});
this.model.add(person);
}
});
window.app.PersonView = Backbone.View.extend({
tagname: "li",
template: _.template($("#person_template").html()),
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
window.app.PeopleView = Backbone.View.extend({
tagName: "ul",
initialize: function() {
_.bindAll(this, "render", "renderPerson");
this.model.bind("add", this.renderPerson);
},
render: function() {
console.log("rendering");
this.model.each(this.renderPerson);
return this;
},
renderPerson: function(person) {
var personView = new window.app.PersonView({model: person});
$(this.el).append(personView.render().el);
}
});
$(document).ready(function () {
var people = new window.app.People();
var newPersonView = new window.app.NewPersonView({model: people});
var peopleView = new window.app.PeopleView({model: people});
$("#container").html(newPersonView.render().el);
$("#container").append(peopleView.render().el);
});
i would do the click in the view
you would need 2 views in my eyes, 1 is an appview that holds your entire app
the other is just a view for each usermodel you render out in your list .
here is your user model
var User = Backbone.Model.extend({
defaults: {
id: 0,
name: 'no-name'
}
});
here is your collection
var Users = Backbone.Collection.extend({
model: User,
create : function(model, options) {
var coll = this;
options || (options = {});
if (!(model instanceof Backbone.Model)) {
model = new this.model(model, {collection: coll});
} else {
model.collection = coll;
}
var success = function(savedModel, resp) {
coll.add(savedModel);
if (options.success) options.success(nextModel, resp);
// fire success event
coll.trigger("savesuccess", savedModel);
};
var error = function(resp) {
if(options.error) options.error(resp);
// fire error event
coll.trigger("saveerror");
}
return model.save(null, {success : success, error : error});
}
});
so here is a possible user view
var UserRow = Backbone.View.extend({
tagName: "li",
initialize: function(){
_.bindAll(this, 'render');
this.model.bind('change', this.render);
},
className: "user",
render: function() {
var user = this.model;
$(this.el).html(user.get('name'));
return this;
}
});
here is your appView
var AppView = Backbone.View.extend({
el: 'body',
events: {
'click button#btnSubmit': 'addUser'
},
initialize: function(){
this.collection = new Users();
this.collection.bind('add', this.appendUser);
this.collection.bind('savesuccess', this.saveSuccess);
this.collection.bind('saveerror', this.saveError);
this.counter = 0;
this.render();
},
addUser: function(){
this.counter++;
var user = new User();
user.set({
id: user.get('id') + this.counter,
name: $('#txtName', this.el).val()
});
this.collection.add(user);
},
appendUser: function(user){
var userRow = new UserRow({
model: user
});
$('ul#names', this.el).append(userRow.render().el);
},
saveSuccess: function(user){
alert('successfully saved, you can append something to the AppView DOM to show that saving was successful ...');
},
saveError: function(){
alert('failed to save, you can append something to the AppView Dom to show that saving failed, or remove the item again ...');
}
});
here you initialize it all
var App = new AppView();
as you can see, rendering the items itself does not happen after saving it in the database, it is added to the collection, the appView binds to the add event of the collection and appends the new user to your list.
the CRUD server connection works automatically, due to using the create function on the collection.
the idea here is that you don't need to user backbone events, trigger an event from your collections successful save or error save, and let any view bind to that event to make something happen on the screen when save was a success or not.