I am trying to get to grips with Backbone.js and have been following the 'modular' approach outlined by Thomas Davis here.
I seem to be stuck when trying to 'include' a view within another view as follows:
SettingsView.js
define([
'jquery',
'underscore',
'backbone',
'text!templates/settings/settingsTemplate.html'
], function($, _, Backbone, settingsTemplate){
var SettingsView = Backbone.View.extend({
el: $("#interface"),
render: function() {
this.$el.html(settingsTemplate);
}
});
return SettingsView;
});
ScriptView.js
define([
'jquery',
'underscore',
'backbone',
'views/settings/SettingsView',
'models/script/ScriptModel',
'collections/scripts/ScriptsCollection',
'text!templates/script/scriptTemplate.html'
],
function($, _, Backbone, SettingsView, ScriptModel, ScriptsCollection, scriptTemplate) {
var ScriptView = Backbone.View.extend({
el : $("#container"),
render : function() {
this.$el.html(scriptTemplate);
//add the settings view
var settingsView = new SettingsView();
settingsView.render();
}
});
return ScriptView;
});
UPDATED: I have managed to fix the error which I have just realised as to why that was happening (params were in the wrong order - DOH!!)
I no longer get the error but my 'SettingsView' is still not appearing. When I console log this inside 'ScriptView.js' I see that 'el' is undefined so my thinking is that this is where the issue may be...?
Thanks
I think you have to append the SettingsView to the el of the ScriptView:
var ScriptView = Backbone.View.extend({
el : $("#container"),
render : function() {
this.$el.html(scriptTemplate);
//add the settings view
var settingsView = new SettingsView();
settingsView.render();
this.$el.append(settingsView.el);
}
});
And a great post about subviews is this one.
I hope it helps!
Related
I am new in Backbone.js. I just started a project with backbone.js. But i am faceing some issues. my model is :
define([
'underscore',
'backbone'
], function(_, Backbone) {
var Event = Backbone.Model.extend({
urlRoot: '/event',
idAttribute: 'eventID',
defaults: {
eventID: null
, eventKind: null
, eventTypeID: null
, eventDate: null
}
});
return Event;
});
Collection is :
define([
'jquery',
'underscore',
'backbone',
'../newModels/event'
], function($, _, Backbone, Event){
var event = new Event();
var Events = Backbone.Collection.extend({
url: '/event',
model: event,
orderBy: "eventID",
});
return Events;
});
and my View is :
define([
'jquery',
'underscore',
'backbone',
'../newModels/event',
'../newCollections/events',
'text!templates/Template.html'
], function($, _, Backbone,Event,EventsCollection,Template){
var sView = Backbone.View.extend({
el: $("#contentView"),
render: function(){
var eventsCollection = new EventsCollection();
var data = [];
eventsCollection.fetch({
success: function(collection,response){
alert("REST Service call was success");
alert(JSON.stringify(collection.models));
})
}
});
return sView;
});
But when execute the eventsCollection.fetch() in render function, i am getting the following error :
Uncaught TypeError: this.model is not a constructor
at F.d._prepareModel (backbone-min.js:24)
at F.d.add (backbone-min.js:19)
Please help me to find out the issue/my mistakes in coding. Every help will be appreciable.
Whats the problem have to face calling view to another view?...when i call the menu view to home view. Menu view not rendering properly. and big problem here that events not working !! but if call the menu view individualy then works fine. i have question that whats the problem exacty in events and render template??
define([
"jquery",
"underscore",
"backbone",
"models/menu/MenuModel",
"collections/menu/MenuCollections",
"text!templates/menu/menuTemplate.html",
], function ($, _, Backbone, MenuModel, MenuCollections, menuTemplate) {
var MenuView = Backbone.View.extend({
model: new MenuModel,
el:".sidebar_menu",
template: _.template(menuTemplate),
events:{
"click #sidebar .has-sub > a":"main_menu"
},
initialize:function(){
this.render();
},
render: function () {
this.$el.html(this.template());
},
main_menu:function(e){
alert("rakib");
var last = $('.has-sub.open', $('#sidebar'));
last.removeClass("open");
$('.arrow', last).removeClass("open");
$('.sub', last).slideUp(200);
var sub = $(e.target).next();
if (sub.is(":visible")) {
$('.arrow', $(e.target)).removeClass("open");
$(e.target).parent().removeClass("open");
sub.slideUp(200);
} else {
$('.arrow', jQuery(e.target)).addClass("open");
$(e.target).parent().addClass("open");
sub.slideDown(200);
}
}
});
return MenuView;
});
When i call menu view to home view..event is not working. whats the problem exactly ??
define([
"jquery",
"underscore",
"backbone",
"views/menu/MenuView",
"models/home/HomeModel",
"text!templates/home/homeTemplate.html",
], function ($, _, Backbone, MenuView, HomeModel, homeTemplate) {
var HomeView = Backbone.View.extend({
model: new HomeModel,
el: $("#container"),
template: _.template(homeTemplate),
initialize:function(){
this.render();
this.menu_render();
},
render: function () {
this.$el.html(this.template());
},
menu_render:function()
{
(new MenuView).render();
}
});
return HomeView;
});
Well, you need to add your new view inside an html element of your current view to display it.
I would suggest to add your MenuView to an html element defined in your template file of your HomeView using an append function.
Like this:
$('#yourHomeViewHTMLElementDefinedInTemplate').append((new MenuView).render().el);
in your code try this:
menu_render:function()
{
$("#container").append((new MenuView).render().el);
}
I hope it helps.
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. My question: is how do I fetch.() my model from within my view. What I have tried is below, however I get the error 'Campaign is undefined'. I think I'm very close:
Model:
define([
'underscore',
'backbone'
], function(_, Backbone) {
var Campagin = Backbone.Model.extend({
urlRoot: '/api/v1/campaign/'
});
return Campagin;
});
View:
define([
'jquery',
'underscore',
'backbone',
'views/RewardView',
'views/FriendRewardView',
'models/CampaginModel',
'text!templates/backbone/portal/campaignTemplate.html'
], function($, _, Backbone, campaignTemplate){
var CampaginView = Backbone.View.extend({
el: '#campaign-panel',
render: function(options) {
if(options.id){
var campaign = new Campagin({id: options.id});
campaign.fetch({
success: function(campaign){
// We can only get the reward when the campaign reward url is returned.
var rewardview = new RewardView();
rewardview.render({reward_url: campaign.get('participant_reward')});
var friendview = new FriendRewardView();
friendview.render({reward_url: campaign.get('friend_reward')});
var template = _.template(campaignTemplate, {campaign: campaign});
this.$el.html(template);
}// end success
}); // end fetch
}// end if option.id
} // end render function
}); // end campagin view
return CampaginView;
});
In your View you are specifying an array of dependencies, which will be passed to the definition function as function arguments, listed in the same order as the order in the array. But you only declared 4 arguments: $ (jQuery), _ (underscore), Backbone and campaignTemplate(which is wrong because according your dependencies should be RewardView). So you have to declare properly your functions. For example:
define([
'jquery',
'underscore',
'backbone',
'views/RewardView',
'views/FriendRewardView',
'models/CampaginModel',
'text!templates/backbone/portal/campaignTemplate.html'
], function($, _, Backbone, RewardView, FriendRewardView, Campagin, campaignTemplate){
...
}
Check the documentation of Require JS for more info.
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).