I am using requireJS in combination with backbone:
define([
"jquery",
"underscore",
"backbone",
"models/modelA"
], function( $, _, Backbone, MyModel ) {
var viewA = Backbone.View.extend({
initialize: function() {
this.model = new MyModel();
}
});
return viewA;
});
I want to create a new View module, ViewB, that has all of the same methods as viewA, but that uses a different model in place of modelA. I know I can override the initialize function, but I am wondering if there is a more concise way, to avoid duplication of code...
define([
"jquery",
"underscore",
"backbone",
"views/viewA",
"models/modelB"
], function( $, _, Backbone, ViewA, myModel ) {
var viewB = ViewA.extend({
initialize: function() {
this.model = new MyModel();
}
});
return viewB;
});
If the two views are exactly the same, just pass in the instantiated model instead of creating it in initialize. Then you only need to define one view.
define([
"jquery",
"underscore",
"backbone"
// no model module needed here.
], function( $, _, Backbone ) {
var viewA = Backbone.View.extend({
initialize: function() {
}
});
return viewA;
});
Then in some other module which requires both models and the view:
var modelA = new ModelA();
var modelB = new ModelB();
// create 2 instances of ViewA with different model passed in
var viewA = new ViewA({model: modelA});
var viewB = new ViewA({model: modelB});
When created like this, each view will have this.model set to the instance you pass in.
define(['views/ViewA'], function() {
var ViewA = require('views/ViewA'), // require ViewA
ViewB = ViewA.extend({
// add all your ViewB specific methods/properties here
});
return ViewB; // return ViewB from the RequireJS module so it can be used elsewhere
});
Related
I just started to lean Backbone, and underscore template, not sure if the structure suitable for it.
The question is, when I reload a template, how to re-bind event from Backbone which is re-run the events function.
The example is simply load an index page, insert main_option template into the page, and jump between main_option, and role_view template.
Here is the app.js which I put router in there:
define(['jquery', 'underscore', 'backbone', 'views/role_view', 'views/main_options'], function ($, _, Backbone, rolePage, mainOptions) {
var appRouter = Backbone.Router.extend({
$el: $('.container'),
initialize: function () {
this.mainOptionPage = mainOptions;
this.loginView = rolePage;
},
routes: {
"": "mainOption",
"views/role_view": "login"
},
mainOption: function () {
this.$el.html(this.mainOptionPage.render().$el);
},
login: function () {
this.$el.html(this.loginView.render().$el);
}
});
var router = new appRouter();
Backbone.history.start();
});
Here is the main_option.js
define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){
var Person = Backbone.Model.extend({
defaults: {
name: 'Guest Worker',
age: 23,
occupation: 'worker'
}
});
var testView = Backbone.View.extend({
$el: $('#indexPage'),
initialize: function () {
var self = this;
$.get('/test/templates/mainOptions.html').success(function (data) {
self.template_loaded(data);
template = _.template(data, {name: "Test"});
}, 'html');
},
events: {
'click .signButton': 'pageToSign'
},
pageToSign: function (e) {
e.preventDefault();
Backbone.history.navigate("views/role_view", {trigger: true});
},
template_loaded: function (html) {
var template = _.template(html, {name: "Test"});
this.$el.html(template);
return this;
}
});
var person = new Person;
return new testView({model: person});
});
and final page is role_view.js
define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){
var role = Backbone.View.extend({
initialize: function(){
var self = this;
$.get('/test/templates/chooseRole.html').success(function(html){
self.template_loaded(html);
});
},
events: {
'click .parentButton': 'parentClick'
},
template_loaded: function(html) {
var template = _.template(html, {name: "Test"});
this.$el.html(template);
return this;
},
parentClick: function(e) {
e.preventDefault();
Backbone.history.navigate("", {trigger: true});
}
});
return new role();
});
Thanks.
You real problem is that you're reusing views rather than destroying and creating them as needed. In your router, you have this:
mainOption: function () {
this.$el.html(this.mainOptionPage.render().$el);
},
login: function () {
this.$el.html(this.loginView.render().$el);
}
You call this.$el.html the first time, the view goes up, and everything seems to be okay. Then you switch views by calling this.$el.html and everything still seems to be okay. But the next time you switch views, your events are gone. This happens because of the way jQuery's html function works; from the fine manual:
When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content. Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.
Emphasis mine. Calling this.$el.html will destroy the event bindings on the previous content (such as this.mainOptionsPage.el or this.loginView.el).
If you create and destroy views as needed:
define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){
// Your Person model goes in its own file or possibly in the router file for now...
var TestView = Backbone.View.extend({
//...
});
return TestView; // Return the view "class", not an instance.
});
define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){
var Role = Backbone.View.extend({
//...
});
return Role;
});
define(['jquery', 'underscore', 'backbone', 'views/role_view', 'views/main_options', 'models/person'], function ($, _, Backbone, Role, TestView, Person) {
var person = new Person; // The person model is managed here.
var appRouter = Backbone.Router.extend({
//...
initialize: function () {
// Don't need anything in here anymore.
},
//...
mainOption: function () {
// Create a new view when we need it.
this.switchTo(new TestView({ model: person }));
},
login: function() {
// Create a new view when we need it.
this.switchTo(new Role);
},
switchTo: function(view) {
// Destroy the old view since we don't need it anymore.
if(this.currentView)
this.currentView.remove();
// Keep track of the new current view so that we can
// kill it alter and avoid leaks.
this.currentView = view;
this.$el.html(this.currentView.render().el);
}
});
//...
});
I want to restart all JQuery events in Backbone. The problem is this: when you go to the particular view I have the following event:
el: $('#content'),
events : {
'click #stops-drop-down' : 'stopDropDown',
},
stopDropDown: function(ui){
console.log("Event");
$("#stops-drop-down").toggleClass("focus-box");
$("#stops-list").slideToggle();
}
When you return to the previous view from which I've come to current and again go back to current and use the event, it is already running 2 times, if you do the same exercise another way it 3 times and it begins to grow. How can I deal with this problem and open the reset each time events?
Also to mention that use Requirejs. Here's what it looks like my router .js
define([
'jquery',
'underscore',
'backbone',
'views/home/home',
'views/line/line',
], function($, _, Backbone, HomeView, LineView){
var AppRouter = Backbone.Router.extend({
routes: {
'': 'homePage',
'line/:line/:type_transport': 'lineDetails',
'*action': 'errPage'
}
});
var initialize = function(){
var self = this;
var app_router = new AppRouter;
app_router.on('route:homePage', function() {
var homeView = new HomeView();
});
app_router.on('route:lineDetails', function(line, typeTransport) {
var lineDetailsView = new LineView();
lineDetailsView.render(line, typeTransport);
})
app_router.on('route:errPage', function() {
alert("Err Page");
});
Backbone.history.start();
};
return {
initialize: initialize
};
});
SOLUTION:
I decided my problem as follows: I created the close method, which has the following content:
close: function(){
this.undelegateEvents();
$(this).empty;
this.unbind();
},
Also, here's how it seems my router.js now:
define([
'jquery',
'underscore',
'backbone',
'views/home/home',
'views/line/line',
], function($, _, Backbone, HomeView, LineView){
var AppRouter = Backbone.Router.extend({
routes: {
'': 'homePage',
'line/:line/:type_transport': 'lineDetails',
'*action': 'errPage'
}
});
var initialize = function(){
var self = this;
var app_router = new AppRouter;
var lineDetailsView;
var homeView ;
app_router.on('route:homePage', function() {
if(homeView) {
homeView.close();
}
homeView = new HomeView();
});
app_router.on('route:lineDetails', function(line, typeTransport) {
if(lineDetailsView){
lineDetailsView.close();
}
lineDetailsView = new LineView();
lineDetailsView.render(line, typeTransport);
})
app_router.on('route:errPage', function() {
alert("Err Page");
});
Backbone.history.start();
};
return {
initialize: initialize
};
});
var YourView = Backbone.View.extend({
el: $('#content'),
events : {
'click #stops-drop-down' : 'stopDropDown',
},
close : function(){
this.remove(); // removes view from dom
this.unbind(); // unbinds all the events associated with the view
},
stopDropDown: function(ui){
console.log("Event");
$("#stops-drop-down").toggleClass("focus-box");
$("#stops-list").slideToggle();
}
});
// check if view already exists before creating new instance
// if exists call close on that view -- and then create your new view
if(yourView)
yourView.close();
yourview = new YourView();
check this article , there may be other reasons for the view to still exist
EDIT
this is almost the same way i have done in my application make sure you add close function as property in all views
define([
'jquery',
'underscore',
'backbone',
'views/home/home',
'views/line/line',
], function($, _, Backbone, HomeView, LineView){
var AppRouter = Backbone.Router.extend({
routes: {
'': 'homePage',
'line/:line/:type_transport': 'lineDetails',
'*action': 'errPage'
}
});
var initialize = function(){
var self = this;
var app_router = new AppRouter;
app_router.on('route:homePage', function() {
if(homeView)
homeView.close();
var homeView = new HomeView();
});
app_router.on('route:lineDetails', function(line, typeTransport) {
if(lineDetailsView)
lineDetailsView.close();
var lineDetailsView = new LineView();
lineDetailsView.render(line, typeTransport);
})
app_router.on('route:errPage', function() {
alert("Err Page");
});
Backbone.history.start();
};
return {
initialize: initialize
};
});
Possibly related: Nested Models in Backbone.js, how to approach
Code snippet:
define([
'jquery',
'backbone',
], function($, Backbone){
var GenreModel = Backbone.Model.extend({
defaults: {
currentGenre: null,
availableGenres: []
},
initialize: function() {}
});
var MusicModel = Backbone.Model.extend({
defaults: {
genre: new GenreModel()
},
initialize: function() {}
});
// Return the model for the module
return MusicModel;
});
Is the above practice acceptable? I only have one level of nested models MusicModel.get('genre'). The reason I am doing this is that while I want to listen to the changes in the genre model, I don't want to create another view for genre because it's too small. I'd appreciate any suggestions!
I'm using backbone.marionette for view control.
My issue is "How do you pass a parameter to a model?"
This is what I have tried:
define([
'jquery',
'underscore',
'backbone',
'models/CampaginModel',
'collections/CampaignCollection',
'text!templates/includes/_campaign.html'
], function ($, _, Backbone, CampaginModel, CampaignCollection, campaignTemplate) {
var campaginView = Backbone.Marionette.ItemView.extend({
template: campaignTemplate,
initialize: function (options) {
this.campaign_id = options.id;
},
model: CampaginModel({id: this.campaign_id}),
onRender: function () {
}
}); // end campagin view
return campaginView;
});
I have noticed that my parameter get passed to the view init function I'm kinda stuck after this point. In standard backbone I just created a new model in the render function and passed the parameter to the model that way. However Marionette views have a 'model' attribute which I think should allow me to pass in it there, but it does not!
Model:
define([
'underscore',
'backbone',
'jquery'
], function (_, Backbone, jquery) {
var CampaginModel = Backbone.Model.extend({
urlRoot: '/api/v1/campaign/',
// Model Constructor
initialize: function () {
},
});
return CampaginModel;
});
I don't know what your file structure looks like.
But it should be like something like this.
define([
'jquery',
'underscore',
'backbone',
'models/CampaginModel',
'collections/CampaignCollection',
'text!templates/includes/_campaign.html'
], function ($, _, Backbone, CampaginModel, CampaignCollection, campaignTemplate) {
var campaginView = Backbone.Marionette.ItemView.extend({
template: campaignTemplate,
initialize: function (options) {
this.campaign_id = options.id;
this.model.set({id: this.campaign_id});
},
model: CampaginModel,
onRender: function () {
}
}); // end campagin view
return campaginView;
});
I haven't test the code yet.
If you need to set your parameters to model, you have to use backbone's model.set() function
I'm using Require.js with Backbone.js and Underscore.js, and I have a nested view that is coming up as undefined when called as a dependency, but when I have the two views in the same module, they work fine. I'm wondering what I'm doing wrong. Here's an example:
child-view.js
define([
'jQuery',
'Underscore',
'Backbone',
], function ($, _, Backbone) {
var ChildView = Backbone.View.extend({
initialize: function () {
_.bindAll(this, 'render');
this.render();
},
});
return ChildView;
});
parentview.js
define([
'jQuery',
'Underscore',
'Backbone',
'src/views/child-view'
], function ($, _, Backbone, ChildView){
var ParentView = Backbone.View.extend({
initialize: function () {
_.bindAll(this, 'render');
this.render();
},
render: function () {
child = new ChildView({});
}
});
return ParentView;
});
I receive a "Uncaught TypeError: undefined is not a function" when trying to call the new ChildView. If I reference the ChildView outside of the Parentview but inside of parentview.js, it displays the view, but as an object.
Just from your code, there should be no problem, I tested your code actually did not find the problem.
This is my test code，you can try it：
http://files.cnblogs.com/justinw/test_byfejustin.zip
I think it might be your “require.js” have a problem,you can replace your "require.js" with my "test_byfejustin\js\libs\require\require.js" in my code package,and try again.
Variable names are case-sensitive. In child-view.js you are returning "ChildView" which is undefined (you've assigned childView).