I'm laying out the basic structure and just started to create models. The issue is that the reference to the initialized Stackmob is lost within the model.
main.js
require(['modernizr','jquery','backbone', 'underscore', 'routers/router', 'stackmob'], function(Modernizr, $, Backbone, _, Router, Stackmob) {
StackMob.init({
appName: {appName},
clientSubdomain: {clientSubdomain},
apiVersion: 0
});
// Instantiates a new Router
this.router = new Router();
});
Model.js
define(['jquery', 'backbone', 'stackmob', 'models/business'], function($, Backbone, Stackmob, Business) {
var BusinessesCollection = StackMob.Collection.extend({
model: Business,
// Model Constructor
initialize: function() {
}
});
// Returns the Model class
return BusinessesCollection;
});
How can I get the initialized StackMob object to be accessible to the model module?
Introduce a sort of instance of StackMob?
my-stackmob.js
define(['stackmob'], function(StackMob) {
StackMob.init({
appName: {appName},
clientSubdomain: {clientSubdomain},
apiVersion: 0
});
// return a particular StackMob that we've initialised
return StackMob;
});
main.js
(would not appear to use StackMob directly any more, based on your example code)
require(['modernizr','jquery','backbone', 'underscore', 'routers/router'], function(Modernizr, $, Backbone, _, Router) {
// Instantiates a new Router
this.router = new Router();
});
Model.js
(uses my-stackmob)
define(['jquery', 'backbone', 'my-stackmob', 'models/business'], function($, Backbone, Stackmob, Business) {
var BusinessesCollection = StackMob.Collection.extend({
model: Business,
// Model Constructor
initialize: function() {
}
});
// Returns the Model class
return BusinessesCollection;
});
Related
Question Updated
I am implementing a search and result for the same in the same page. i
have two seperate html views and views for search and result.
Here is what is happening..
From my router the below view is loaded. This view will load two other views called search and result. I have included the respective html views in the seperate views. but when i run the proj, it displays nothing.
Am i rendering the view in this file wrong ??
if i am rendering it wrong can somebody please tell me where is the mistake and how to rectify it ??
should i include the respective html templates of search and result also in this file ??
views.driver.search.js :
define(
[ 'jquery',
'underscore',
'backbone',
'app/models/model.driver',
'app/collections/collection.driver',
'app/models/model.driver.searchform',
'app/dashboard/views.driver.searchForm',
'app/models/model.driver.searchresult',
'app/dashboard/views.driver.searchResults',
],
function ($, _, Backbone, DriverModel,SearchResultCollection ,searchFormModel, searchFormView, SearchResultModel,SearchResultView) {
var DriverSearchView = Backbone.View.extend({
el: $('#content'),
initialize: function(){
this.render();
},
render: function () {
// var compiledTemplate = _.template(searchFormTemplate, {});
// this.$el.html(compiledTemplate);
this.searchFormInitModel = new searchFormModel();
var searchformView = new searchFormView({model:this.searchFormInitModel});
this.$("#content").html(searchformView.render());
var driver1 = new DriverModel({id:1,firstName:"driver1",lastName:'last',dob:'12/12/12001',});
var driver2 = new DriverModel({id:2,firstName:"driver2",lastName:'last',dob:'12/12/12001',});
var driver3 = new DriverModel({id:3,firstName:"driver3",lastName:'last',dob:'12/12/12001',});
var driver4 = new DriverModel({id:4,firstName:"driver3",lastName:'last',dob:'12/12/12001',});
this.searchResultCollection= new SearchResultCollection([driver1, driver2, driver3, driver4]);
var searchResultView = new SearchResultView({el:this.$el.find("#searchResult"),collection:this.searchResultCollection});
this.$("#content").html(searchResultView.render());
//this.$el.find("#searchResult").html(searchResultView.render());
}
}); // Our module now returns our view
return DriverSearchView;
});
I don't see an issue with your workflow. Reason you are not seeing your console.logs, is because you are returning an object literal containing your initialize function without actually calling the function. Is there a reason you need to return an object from your initialize module?
Anyhow, I am not entirely sure how you calling your app.js file, but try the following if you do not need to return an object back from your initialize module
define(
[
'jquery',
'underscore',
'backbone',
'app/router',
// 'datatable'
],
function ($, _, backbone, router){ //,datatable) {
var initialize = (function () {
console.log("App1");
debugger;
console.log("App2");
router.initialize();
console.log("App3");
})();
// Depending what you want to do here, you could just
// console.log("Router initialized...");
// router.initialize();
});
Here is my view:
define([
'jquery',
'underscore',
'backbone',
'models/tableModel',
'collections/tablesCollection',
'views/tablesView'
], function($, _, Backbone, tableModel, tablesCollection, tablesView) {
require(['collections/tablesCollection'], function(tablesCollection) {
var t = new tablesCollection(null, {url: 'main-contact'});
var tables = new tablesView({ collection: t, template: 'main-contact-template'});
tables.url = 'main-contact';
return tables; // <!-- returns view, tables can be console.log'ed
});
console.log(tables); // <!-- tables is not defined
});
How do I get the tables within the require statement so that is accessible where the console.log is? This seems to be where I need to return the view from, so I can use it in my route:
app_router.on('route:index', function(){
require(['views/tables/mainContactView'], function(mainContactView) {
console.log(mainContactView); // <!-- undefined, unless some value is returned from where the console.log() is above
$('#web-leads').html(mainContactView.render().el);
});
});
If I put return 'test' where the console.log(tables) is, I can console.log() it in my route. So I assume that's where I need to return the view from. How do I pass that data out? Right now, even with a return statement, my view is undefined. I need to get the view out of the require. How do I do that?
You've already loaded collection/tablesCollection in define, so you don't have to do another require to get it loaded.
You can simply the definition of the View as this:
define([
'jquery',
'underscore',
'backbone',
'models/tableModel',
'collections/tablesCollection', // You've already required tablesCollection here.
'views/tablesView'
], function($, _, Backbone, tableModel, tablesCollection, tablesView) {
var t = new tablesCollection(null, {url: 'main-contact'});
var tables = new tablesView({ collection: t, template: 'main-contact-template'});
tables.url = 'main-contact';
return tables;
});
I am new in MVC framework like backbone.js. I am trying to make an application using backbone.js, require.js and underscore.js. I also added jQuery UI. There is a js file named widget.js which actually adjusts widgets like fixing position, firing some events when window re-sizes, firing ui events like button(), tab() etc.
Now the problem is when I open a page using a url directly (like http:://localhost/web/#/login), everything works well. But when I open that page from another page using navigation menu, there occurs a mass. The page looks ugly. I think this is because when I load the page using a url than widget.js loads after DOM is loaded but when I open the page using navigation, then widget.js loads before DOM is loaded. Wasted 3 days to find a solution .But no luck. Here is the code..
define([
'jQuery',
'Underscore',
'Backbone',
'text!templates/loginForm.html',
'text!templates/home.html',
'libs/custom/widget',
], function($, _, Backbone, loginForm, homeTemplate, widget){
var loginView = Backbone.View.extend({
el: $("#page"),
status: 'Failed',
serverMsg:'Mail doesn\'t match',
events:{
"click .login":"login"
},
isLogedIn:function(){
if(this.status=='Failed' || this.status==''){
console.log("error");
}else{
console.log("succss");
}
},
login:function(e){
e.preventDefault();
var info = $(".loginForm").serialize();
var url = 'http://rest.homeshop.dev/login/';
var This = this;
$.ajax({
url:url,
type:"POST",
data:info,
success:function(data){
data = $.parseJSON(data);
This.serverMsg = data.msg;
This.status = data.status;s
This.isLogedIn();
}
});
return false;
},
initialize: function(){
},
render: function(){
var data = {};
var compiledTemplate = _.template( loginForm, data);
this.el.find('.carrier').html(compiledTemplate);
}
});
return new loginView;
});
Also I did not added jquery Ui library here as I have added that library in application.js .Here is the codes for application.js
define([
'jQuery',
'Underscore',
'Backbone',
'router',
'libs/custom/jqueryUi-min',
'libs/custom/widget',
'libs/custom/layoutSwitcher'
], function($, _, Backbone, Router){
var initialize = function(){
Router.initialize();
}
return {
initialize: initialize
};
});
Can any one help me ?
I think what you want is the domReady! plugin. http://requirejs.org/docs/api.html#pageload
define(['jQuery', 'Backbone', 'Router', 'libs/custom/widget', 'domReady!']
, function($, Backbone, Router, widget, dom) {
//execute your code knowing that the DOM has loaded.
}
)
Hope this helps!
So I'm working on a backbone app, and trying to modularize things as much as I can using require.js. This has been my guide.
I'm having trouble getting my view to always fetch my collection. If I access my app from the base url (myapp.com/), and go to the route of my view, the collection is fetched. If I do not go to the view, and instead access it from myapp.com/#/campaigns, then the collection is not fetched.
Here is some relevant code.
router.js
define([
'jQuery',
'Underscore',
'Backbone',
'views/home/main',
'views/campaigns/list'
], function($, _, Backbone, mainHomeView, campaignListView ){
var AppRouter = Backbone.Router.extend({
routes: {
// Define some URL routes
'campaigns': 'showCampaigns',
// Default
'*actions': 'defaultAction'
},
showCampaigns: function(){
campaignListView.render();
},
defaultAction: function(actions){
// We have no matching route, lets display the home page
//mainHomeView.render();
}
});
var initialize = function(){
var app_router = new AppRouter;
Backbone.history.start();
};
return {
initialize: initialize
};
});
collections/campaigns.js
define([
'jQuery',
'Underscore',
'Backbone',
'models/campaigns'
], function($, _, Backbone, campaignsModel){
var campaignsCollection = Backbone.Collection.extend({
model: campaignsModel,
url: '/campaigns',
initialize: function(){
}
});
return new campaignsCollection;
});
views/campaigns/list.js
define([
'jQuery',
'Underscore',
'Backbone',
'collections/campaigns'
], function($, _, Backbone, campaignsCollection){
var campaignListView = Backbone.View.extend({
el:$('#container'),
initialize:function(){
this.collection = campaignsCollection;
this.collection.fetch();
},
render: function(){
var data = {
campaigns: this.collection,
_: _
};
$('#container').html('Campaigns length: '+data.campaigns.models.length);
}
});
return new campaignListView;
});
Any ideas on what I'm doing wrong? I believe it has something to do with calling this.collection.fetch() in the initalize function of the view. If that is the issue, where should I put fetch()?
The problem in your code is that your campaignListView fetch the collection when it is initialized and it is initialized only once. Your render method which is actually called from the router doesn't call your initialize method of campaignListView, when you change theurl your second time.
You have two options here :
1. return the class not the instance of your campaignListView and initialize it in the router :
// in your router code
showCampaigns: function(){
var campaignListViewInstance = new campaignListView(); // don't forget the brackets after your initialize function
campaignListViewInstance.render();
},
// in your campaignListView code :
return campaignListView; // without "new"
This will initialize the code everytime the router is hit.
2. place your fetch in the render method
// in your campaignListView code :
initialize:function(){
this.collection = campaignsCollection;
},
render: function(){
this.collection.fetch({success: function(collection) {
var data = {
campaigns: collection,
_: _
};
$('#container').html('Campaigns length: '+data.campaigns.models.length);
}); // this will be fetched everytime you render and also it has success callback
}
Also be aware that you should replace all your instance creating functions with brackets at the end
return new campaignListView; --> return new campaignListView();
return new campaignsCollection; --> return new campaignsCollection();
Another problem you will face is the async work of fetch. You should use success or event driven rendering of your collection, because fetch works in the background and you will have no data when you immediately call render after calling fetch.
+1 for your AMD approach.
I should really update the tutorial but it's better to not return instantiated modules. Maybe try checking out http://backboneboilerplate.com
I'm in the process of creating a Backbone.js app using Require.js. Each view file corresponds to one resource (e.g. 'News'). Within each view file, I declare a backbone
view for each action ('index', 'new', etc). At the bottom of the view file I receive
the necessary info from the router and then decide which view to instantiate (based on the info passed in from the router).
This all works well, but it requires lots of code and doesn't seem to be the 'backbone.js way'. For one thing, I'm rellying on the url to manage state. For another, I'm not using _.bind which pops up in a lot of backbone.js examples. In other words, I don't think I'm doing it right, and my code base smells... Any thoughts on how to structure my app better?
router.js
define([
'jquery',
'underscore',
'backbone',
'views/news'],
function($, _, Backbone, newsView){
var AppRouter = Backbone.Router.extend({
routes:{
'news':'news',
'news/:action':'news',
'news/:action/:id':'news'
},
news: function(action, id){
newsView(this, action, id).render();
}
});
var intialize = function(){
new AppRouter;
Backbone.history.start()
};
return{
initialize: initialize;
};
}
news.js ('views/news')
define([
'jquery',
'underscore',
'backbone',
'collections/news',
'text!templates/news/index.html',
'text!templates/news/form.html'
], function($, _, Backbone, newsCollection, newsIndexTemplate, newsFormTemplate){
var indexNewsView = Backbone.View.extend({
el: $("#content"),
initialize: function(router){
...
},
render: function(){
...
}
});
var newNewsView = Backbone.View.extend({
el: $("#modal"),
render: function(){
...
}
});
...
/*
* SUB ROUTER ACTIONS
*/
var defaultAction = function(router){
return new newsIndexView(router);
}
var subRouter = {
undefined: function(router){return defaultAction(router);},
'index': function(router){ return defaultAction(router);},
'new': function(){
return new newNewsView()
},
'create': function(router){
unsavedModel = {
title : $(".modal-body form input[name=title]").val(),
body : $(".modal-body form textarea").val()
};
return new createNewsView(router, unsavedModel);
},
'edit': function(router, id){
return new editNewsView(router, id);
},
'update': function(router, id){
unsavedModel = {
title : $(".modal-body form input[name=title]").val(),
body : $(".modal-body form textarea").val()
};
return new updateNewsView(router, id, unsavedModel);
},
}
return function(router, action, id){
var re = /^(index)$|^(edit)$|^(update)$|^(new)$|^(create)$/
if(action != undefined && !re.test(action)){
router.navigate('/news',true);
}
return subRouter[action](router, id);
}
});
While I feel like it's important to emphasize that there isn't really a "Backbone.js way", it does seem like you're replicating work Backbone should be doing for you.
I agree that it makes sense to have a specialized Router for each independent section of your application. But it looks at first glance like what you're doing in your "sub-router" section is just recreating the Backbone.Router functionality. Your AppRouter doesn't need to deal with /news URLs at all; you can just initialize a NewsRouter with news-specific routes, and it will deal with news-related URLs:
var NewsRouter = Backbone.Router.extend({
routes:{
'news': 'index',
'news/create': 'create',
'news/update/:id': 'update',
'news/edit/:id': 'edit'
},
index: function() { ... },
create: function() { ... },
// etc
});
As long as this is initialized before you call Backbone.history.start(), it will capture URL requests for its routes, and you never have to deal with the AppRouter. You also don't need to deal with the ugly bit of code at the bottom of your view - that's basically just doing what the core Backbone.Router does for you.
I'm using require.js and backbone as well I think the main difference that i'd suggest is that each file should return just one view, model, router or collection.
so my main html page requires my main router. That router is a module that requires a few views based on each of it's routes, and a bootstrapped model. Each router method passes the relevant bootstrapped model piece to the relevant view.
From there it stays really clean as long as each file is just 1 backbone thing (model, collection, view, router) and requires just the elements it uses. This makes for a lot of js files (I have about 100 for my current project) but that's where require.js optimization comes into play.
I hope that helps.
Why don't you structure your routes like this:
routes:{
'news':'news',
'news/edit/:id':'editNews',
'news/new':'newNews',
...
}