I have a three backbone routes
routes: {
"foo": "foo",
"": "foo",
"foo/bar": "bar",
"foo/baz": "baz"
},
foo: function () {
var fooView = new contentCollectionView({
collection: collection,
tagName: "div",
className: "foo"
});
fooView.close();
FOO.content.show(fooView);
},
bar: function(){
this.foo();
...
},
baz: function(){
this.foo();
...
}
});
With bar and baz functions I would really like to only run foo if fooView is not currently shown, otherwise the only thing they do is to change a css class that changes how foo is displayed.
You can compare the url fragment,
bar: function () {
if ( Backbone.history.getFragment() !== 'foo' ) {
this.foo();
} else {
// do other stuff
}
}
Let me know if this helps
Related
I am trying to render a list using a map function to create an array of list components. I am passing items prop from an external JS file. Please note I am logging typeof(this.props.title).
//THE CHILD -- RENDERS THE LI TAG
a = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
onSelected: React.PropTypes.func.isRequired
},
render: function() {
console.log(typeof(this.props.title));
return React.createElement("li", {className:"filter_li"))
}
}),
//THE PARENT
s = React.createClass({
propTypes: {
items: React.PropTypes.array.isRequired
},
render: function() {
var h, c, o;
return h = {
className: "filter_ul"
},
React.createElement("ul",Object.assign({},h),
this.props.items.map(function(e,index) {
var p = {
key: index,
title: e.title,
onSelected: this._onItemSelected
};
return React.createElement(a, p)
},this))
},
_onItemSelected: function() {
console.log("Selected")
}
}),
module.exports = s
When I run this, the log has 'string' printed 10 times as expected (there are 10 list items) but then after that 'undefined' printed 6 times -- why does this happen?
Expanding my original question located here
If my Userview is in Userview.js file and I want to inherit from that class in AdminView.js file, how would I go about it.
I tried this, but would not fit my need as I don't have a class.
UPDATE 1:
define([
'modules/userdetail'
],
function(UserView) {
var adminView
adminView.Views.Content = UserView.Views.Content.extend({
initialize: function() {
//looking to override the fn that is declared in UserView
console.log("AAA");
},
});
}
UPDATE 2:
So digging deep, the User Detail is
define(
[ 'modules/baseClass'],
function(BaseClass) {
// Create a new module
//Create Model
//Create View
UserDetails.Views.Content = Backbone.View
.extend({
template :
initialize : function() {
this.model = new UserDetails.Model();
},
events : {
},
render : function(LayOut) {
return LayOut(this).render().then(this.pageReady);
},
pageReady : function() {
},
});
UserDetails.activate = function() {
app.router.navigate('UserDetails', true);
};
UserDetails.configureRouting = function() {
app.router.route('UserDetails', 'UserDetails',
function() {
layoutmanager.setView('#content',
new UserDetails.Views.Content())
.render();
});
};
return UserDetails;
});
ADMIN:
define([
'modules/baseclass',
'modules/UserDetail'
],
function(BaseClass, UserDetails) {
UserDetail.Views.Content = UserDetail.Views.Content.extend({
render:function(){
console.log("rendering");
UserDetail.Views.Content.prototype.render();
}
});
//create admin model
//admin view
AdminView.Views.Content = Backbone.View.extend({
template: "admin-template",
events: {
},
initialize: function() {
this.model = new AdminModel.Model();
},
render: function(manage) {
return manage(this).render().then(this.pageReady);
},
pageReady: function() {
});
},
AdminView.activate = function() {
app.router.navigate('adminview', true);
};
AdminView.configureRouting = function() {
app.router.route('adminview', 'adminview', function() {
layoutmanager.setView('#content', new AdminView.Views.Content()).render();
layoutmanager.setView('#userDetials', new UserDetials.Views.Content()).render();
});
};
if(app.router && app.router.route) {
AdminView.configureRouting();
}
return AdminView;
});
Now if I have to call the render of the userdetails from admin view, the render method fails as the param is undefined.
I am not well versed with where the para in render is defined as I looked through my code and have not found anything
Either include the script tag for Userview.js before the script tag for AdminView.js, or using a module system like requirejs or browserify where you can specify the two modules as dependencies.
I have created a model like this
define(['backbone', 'text_dictionary'], function(Backbone, Text_Dict) {
var IndexPageModel = Backbone.Model.extend({
defaults:{
val_btn_gotohomepage : Text_Dict.val_btn_gotohomepage,
val_btn_gotologinpage : Text_Dict.val_btn_gotologinpage,
val_btn_gotolistpage : Text_Dict.val_btn_gotolistpage
}
});
return IndexPageModel;
});
and instantiated this model with 'new' in my page code like this
define([ 'page_layout',
'panel_itemview',
'header_itemview',
'content_itemview',
'footer_itemview',
'templates',
'text_dictionary',
'indexpage_model',
'indexpage_logic'],
function( Page,
Panel,
Header,
Content,
Footer,
Templates,
Text_Dict,
IndexPageModel,
IndexPage_BusnLogic) {
console.log("Success..Inside Index Page.");
var Page_Index = {};
Page_Index.page = (function(){
var _pageName = Text_Dict.indexpage_name;
var _pageModel = new IndexPageModel();
return _pageLayout = Page.pageLayout({
name:_pageName,
panelView: Panel.panelView({name:_pageName, pagetemplate: Templates.simple_panel}),
headerView: Header.headerView({name:_pageName, title: Text_Dict.indexpage_header, pagetemplate: Templates.header_with_buttons}),
contentView: Content.contentView({name:_pageName, page_model:_pageModel, pagetemplate:Templates.content_index, busn_logic:IndexPage_BusnLogic.HandleEvents}),
footerView: Footer.footerView({name:_pageName, title: Text_Dict.indexpage_footer, pagetemplate: Templates.simple_footer})
});
})();
return Page_Index;
});
my page gets created using the page layout
define([ 'underscore', 'marionette' ], function( _, Marionette ) {
console.log("Success..Inside Index View.");
var Page = {};
var _ReplaceWithRegion = Marionette.Region.extend({
open: function(view){
//Need this to keep Panel/Header/Content/Footer at the same level for panel to work properly
this.$el.replaceWith(view.el);
}
});
Page.pageLayout = function (opts) {
var _opts = _.extend ({ name: 'noname',
panelView: null,
headerView: null,
contentView: null,
footerView: null,
}, opts);
return new ( Marionette.Layout.extend({
tagName: 'section',
attributes: function() {
return {
'id': 'page_' + _opts.name,
'data-url': 'page_' + _opts.name,
'data-role': 'page',
'data-theme': 'a'
};
},
template: function () {
return "<div region_id='panel'/><div region_id='header'/><div region_id='content'/><div region_id='footer'/>";
},
regions: {
panel: {selector: "[region_id=panel]", regionType: _ReplaceWithRegion},
header: {selector: "[region_id=header]", regionType: _ReplaceWithRegion},
content: {selector: "[region_id=content]", regionType: _ReplaceWithRegion},
footer: {selector: "[region_id=footer]", regionType: _ReplaceWithRegion},
},
initialize: function(){
$('body').append(this.$el);
this.render();
},
onRender: function() {
if (this.options.panelView) {
this.panel.show (this.options.panelView);
};
if (this.options.headerView) {
this.header.show (this.options.headerView);
};
if (this.options.contentView) {
this.content.show(this.options.contentView);
};
if (this.options.footerView) {
this.footer.show (this.options.footerView);
};
},
}))(_opts);
};
return Page;
});
but in my itemview when i am passing model reference like this
define([ 'underscore', 'marionette', 'event_dictionary', 'app' ], function(_,
Marionette, Event_Dict, App) {
console.log("Success..Inside Content Index View.");
var Content = {};
Content.contentView = function(opts) {
return new (Marionette.ItemView.extend({
tagName : 'div',
attributes : function() {
console.log('options name==' + opts.name);
console.log("page model=="+opts.page_model);
return {
'region_id' : 'content',
'id' : 'content_' + opts.name,
'data-role' : 'content'
};
},
initialize : function() {
_.bindAll(this, "template");
},
template : function() {
return opts.pagetemplate;
},
model : function() {
return opts.page_model;
}
}))(opts);
};
return Content;
});
It's giving me error
Uncaught TypeError: Object function () {
return opts.page_model;
} has no method 'toJSON'
The model property of a view cannot be a function. Backbone allows this for some things like url (by way of the _.result helper function), but not in this case. Change your view code to not have a model function and just do this in initialize:
initialize: function (options) {
this.model = this.page_model = options.page_model;
}
UPDATE since you won't just take my word for it, here is the Marionette source that is almost certainly the top of your exception stack trace. Once again: view.model has to be a model object not a function. Fix that and the error will go away.
The accepted answer is correct, but it took a bit of messing about to find out why I had that error coming up, so I'm offering what the solution for my personal use-case was in case it helps anyone else stumbling upon this page in the future.
I had this:
app.module 'Widget.Meta', (Meta, app, Backbone, Marionette, $, _) ->
Meta.metaView = Backbone.Marionette.ItemView.extend
model: app.Entities.Models.meta
template: '#meta-template'
... when I should have had this:
app.module 'Widget.Meta', (Meta, app, Backbone, Marionette, $, _) ->
Meta.metaView = Backbone.Marionette.ItemView.extend
model: new app.Entities.Models.meta()
template: '#meta-template'
It's just a matter of instantiating the function definition.
I've extended Backbone's View prototype to include a "close" function in order to "kill the zombies", a technique I learned from Derrick Bailey's blog
The code looks like this:
Backbone.View.prototype.close = function () {
this.remove();
this.unbind();
if (this.onClose) {
this.onClose();
}
};
Then I have a Router that looks (mostly) like this:
AppRouter = Backbone.Router.extend({
initialize: function() {
this.routesHit = 0;
//keep count of number of routes handled by your application
Backbone.history.on('route', function () { this.routesHit++; }, this);
},
back: function () {
if(this.routesHit > 1) {
//more than one route hit -> user did not land to current page directly
logDebug("going window.back");
window.history.back();
} else {
//otherwise go to the home page. Use replaceState if available so
//the navigation doesn't create an extra history entry
this.navigate('/', {trigger:true, replace:true});
}
},
routes: {
"": "showLoginView",
"login": "showLoginView",
"signUp": "showSignUpView"
},
showLoginView: function () {
view = new LoginView();
this.render(view);
},
showSignUpView: function () {
view = new SignUpView();
this.render(view);
},
render: function (view) {
if (this.currentView) {
this.currentView.close();
}
view.render();
this.currentView = view;
return this;
}
});
The render function of my LoginView looks like this:
render: function () {
$("#content").html(this.$el.html(_.template($("#login-template").html())));
this.delegateEvents();
return this;
}
The first time the LoginView is rendered, it works great. But if I render a different view (thereby calling "close" on my LoginView) and then try to go back to my LoginView, I get a blank screen. I know for a fact that the render on my LoginView fires the second time, but it seems that my "close" method is causing a problem. Any ideas?
EDIT After some feedback from Rayweb_on, it appears I should add more detail and clarify.
My HTML looks like this:
<div id="header">this is my header</div>
<div id="content">I want my view to render in here</div>
<div id="footer">this is my footer</div>
Then I have a login-template that looks like this (sort of):
<script type="text/template" id="login-template">
<div id="login-view">
<form>
...
</form>
</div>
</script>
I'm trying to get it so that the view always renders inside of that "content" div, but it appears that the call to "close" effectively removes the "content" div from the DOM. Hence the "blank" page. Any ideas?
EDIT 2 Here's what my LoginView looks like, after some noodling:
LoginView = Backbone.View.extend({
events: {
"vclick #login-button": "logIn"
},
el: "#content",
initialize: function () {
_.bindAll(this, "logIn");
},
logIn: function (e) {
...
},
render: function () {
this.$el.html(_.template($("#login-template").html()));
this.delegateEvents();
return this;
}
});
I set the el to "#content" in the hopes that it would get recreated. But still no luck. In fact, now when I go to the next page it's not there because #content is being removed right away.
I also tried:
LoginView = Backbone.View.extend({
events: {
"vclick #login-button": "logIn"
},
el: "#login-template",
initialize: function () {
_.bindAll(this, "logIn");
},
logIn: function (e) {
...
},
render: function () {
this.$el.html(_.template($("#login-template").html()));
this.delegateEvents();
return this;
}
});
But that doesn't work at all. Any ideas?
When you remove your view the first time you are removing its el, so this line
$("#content").html(this.$el.html(_.template($("#login-template").html())));
on your render function wont work. as this.$el. its undefined.
It would appear that any elements included in the view get destroyed (or at least removed from the DOM) by my "close" function (thanks Rayweb_on!). So, if I reference the #content div in my view, I lose it after the view is closed. Therefore, I no longer reference #content anywhere in my view. Instead, I add my view's default "el" to my #content element externally of my view.
In my case, I chose to do it in my router. The result looks like this:
ROUTER
AppRouter = Backbone.Router.extend({
initialize: function() {
...
},
routes: {
"" : "showLoginView",
"login": "showLoginView",
"signUp": "showSignUpView",
},
showLoginView: function () {
view = new LoginView();
this.render(view);
},
showSignUpView: function () {
view = new SignUpView();
this.render(view);
},
render: function (view)
{
if (currentView)
{
currentView.close();
}
$("#content").html(view.render().el);
currentView = view;
return this;
}
});
LOGIN VIEW
LoginView = Backbone.View.extend({
events: {
"vclick #login-button": "logIn"
},
initialize: function () {
_.bindAll(this, "logIn");
},
logIn: function (e) {
...
},
render: function () {
this.$el.html(_.template($("#login-template").html()));
this.delegateEvents();
return this;
}
});
This all works swimingly, but I am not certain it's the best solution. I'm not even certain it's a good solution, but it'll get me moving for now. I'm certainly open to other options.
====
EDIT: Found a slightly cleaner solution.
I wrote a function called injectView that looks like this:
function injectView(view, targetSelector) {
if (_.isNull(targetSelector)) {
targetSelector = "#content";
}
$(targetSelector).html(view.el);
}
and I call it from each View's render function, like this:
render: function () {
this.$el.html(_.template($("#login-template").html()));
this.delegateEvents();
injectView(this,"#content")
return this;
}
It works. I don't know how good it is. But it works.
I've been working on a prototype Backbone application using Backbone.LayoutManager and I'm running into something I don't understand.
The scenario is that I have a form for adding "people" {firstname, lastname} to a list view, I save the model fine and the new item shows up in the list. I also have a remove function that works when after the page is refreshed, but if I try to delete the person I just created without a page refresh, the removeUser() function never gets called.
My code is below. Can someone help me out? I'm just trying to learn Backbone and if you have the answer to this question as well as any other criticisms, I'd be grateful. Thanks.
define([
// Global application context.
"app",
// Third-party libraries.
"backbone"
],
function (app, Backbone) {
var User = app.module();
User.Model = Backbone.Model.extend({
defaults : {
firstName: "",
lastName: ""
}
});
User.Collection = Backbone.Collection.extend({
model: User.Model,
cache: true,
url: "/rest/user"
});
User.Views.EmptyList = Backbone.View.extend({
template: "users/empty-list",
className: "table-data-no-content",
render: function (manage) {
return manage(this).render().then(function () {
this
.$el
.insertAfter(".table-data-header")
.hide()
.slideDown();
});
}
});
User.Views.Item = Backbone.View.extend({
template: "users/user",
tagName: "ul",
className: "table-data-row"
events: {
"click .remove": "removeUser"
},
removeUser: function () {
console.log(this.model);
this.model.destroy();
this.collection.remove(this.model);
this.$el.slideUp();
if (this.collection.length === 0) {
this.insertView(new User.Views.EmptyList).render();
}
}
});
User.Views.List = Backbone.View.extend({
initialize: function () {
this.collection.on("change", this.render, this);
},
render: function (manage) {
if (this.collection.length > 0) {
jQuery(".table-data-no-content").slideUp("fast", function() {
$(this).remove();
});
this.collection.each(function(model) {
this.insertView(new User.Views.Item({
model: model,
collection: this.collection,
serialize: model.toJSON()
}));
}, this);
} else {
this.insertView(new User.Views.EmptyList());
}
// You still must return this view to render, works identical to
// existing functionality.
return manage(this).render();
}
});
User.Views.AddUser = Backbone.View.extend({
template: "users/add-user",
events: {
"click input#saveUser": "saveUser"
},
render: function (manage) {
return manage(this).render().then(function () {
$("input[type='text']")
.clearField()
.eq(0)
.focus();
});
},
saveUser: function () {
var user = new User.Model({
firstName: $(".first-name").val(),
lastName: $(".last-name").val()
});
this.collection.create(user);
this
.$("input[type='text']")
.val("")
.clearField("refresh")
.removeAttr("style")
.eq(0)
.focus();
}
});
return User;
});
The problem turned out to be an incorrect response from the server. Once the server sent back the correct JSON object, everything worked correctly.