I have two different backbone js file for 2 different view. I need to call the render method of the second js file from the first one. How can i do that
I have one backbone.js file which as a view called DocumentsPageView. In my second backbone js file when i click button on the first js file i have to call the render method of DocumentsPageview
first js file
first.backbonejs = (function($) {
case myapp
sectionView = new second.mysecondbackbone.DocumentsPageView();
sectionView.render();
break;
}
}(jQuery)
second js file
second.mysecondbackbone = (function($) {
var DocumentsPageView= Backbone.View.extend({
render: function(){
//render the page
}
});
}(jQuery)
I am getting object undefined in the declaration section
Thanks & Regards
Ashik
My advice is, don't.
Use a mediator object that sits between the two, and controls the process of working with both views.
It can be as simple as this:
myProcess = {
show: function(){
var view1 = new View1();
view1.on("foo", this.doMoreStuff, this);
this.showView(view1);
},
doMoreStuff: function(){
var view2 = new View2();
this.showView(view2);
},
showView: function(view){
// code to stuff view.$el in to the DOM
}
}
The advantage here is that you have a high level workflow that can be managed and maintained on it's own, separate from the implementation details of the individual views. You don't have to trace down in to the individual views to see how they work together.
I wrote more about this, here: http://lostechies.com/derickbailey/2012/05/10/modeling-explicit-workflow-with-code-in-javascript-and-backbone-apps/
Related
I'm developing a single-page web application using Backbone and Laravel. I've set my router to use pushState and configured Laravel to send all other requests to the main view of the backbone application, where backbone takes care of the routing.
My problem/question is as follows:
I have a route called 'dashboard', this route is the main application view and is shown after login. It uses a collection called Clients.
dashboard:function(uri){
dashboardCallback = function(data){
if(data.check){
console.log('generate dashboard');
//get clients collection
clientsCollection = new Dash.Collections.Clients();
clientsCollection.fetch().then(function(clients){
//genenerate dashboard view
new Dash.Views.Dashboard({collection:clientsCollection}).renderDashboard();
});
}
else{
router.navigate('/', {trigger:true, replace:true});
}
}
Dash.Utilities.user.isLoggedIn(dashboardCallback);
},
The Dash.Views.Dashboard view takes care of all the views in the application, when calling the renderDashboard(); method, it starts rendering all client views. This is where it gets interesting.
The code for rendering all the client views is as follows:
renderClients:function(){
console.log('Rendering all clients', this.collection);
clientsView = new Dash.Views.Clients({collection:this.collection}).render();
$(this.el).html(clientsView.el);
}
with the above code, it works in all cases. With that i mean when I log in first and the application routes me to the dashboard view all the clients gets rendered and appended to the DOM, the same thing happens when I access /dashboard immediately (afther the application checks if i'm logged in).
But, when I use the following code it doesn't load the client views when I first log in. It does load the client views when i access /dashboard directly.
renderClients:function(){
console.log('Rendering all clients', this.collection);
clientsView = new Dash.Views.Clients({collection:this.collection}).render();
this.$el.html(clientsView.el);
}
It took me a while to figure out that the fix of the problem was that I had to replace this.$el with $(this.el), but I alway's thought it didn't matter because they are essentially the same, or am I wrong in this assumption?
Can someone explain to me this weird behaviour?
As requested, here is my global Dashboard view
Dash.Views.Dashboard = Backbone.View.extend({
tagName:'div',
id:'main',
className:'dashboard',
initialize: function(){
console.log('Initializing Global Dashboard View');
//make sure the main element is only added once.
if(!$('.dashboard').length){
$('body').append(this.el);
}
else{
this.el = $('.dashboard');
}
},
renderDashboard: function(){
console.log('Render all Dashboard components');
this.renderNavBar();
this.renderClients();
},
renderNavBar: function(){
var navBarView = new Dash.Views.NavBar().render();
$(this.el).before(navBarView.el);
},
renderLogin: function(){
var logInView = new Dash.Views.Login().render();
$(this.el).html(logInView.el);
},
renderWhoops:function(error){
console.log('Render Whoops from Global Dashboard');
var whoopsModel = new Dash.Models.Whoops(error);
$(this.el).html(new Dash.Views.Whoops({model:whoopsModel}).render().el)
},
renderClients:function(){
console.log('Rendering all clients', this.collection);
clientsView = new Dash.Views.Clients({collection:this.collection}).render();
$(this.el).html(clientsView.el);
}
});
I'd guess that your problem is right here:
if(!$('.dashboard').length){
$('body').append(this.el);
}
else{
this.el = $('.dashboard'); // <----- Broken
}
If there is no .dashboard then you directly assign to this.el and that's a mistake as it won't update this.$el. The result is that this.el and this.$el reference different things and nothing works. You should use setElement to change a view's el:
setElement view.setElement(element)
If you'd like to apply a Backbone view to a different DOM element, use setElement, which will also create the cached $el reference and move the view's delegated events from the old element to the new one.
So you should be saying this:
if(!$('.dashboard').length){
$('body').append(this.el);
}
else{
this.setElement($('.dashboard')); // <----- Use setElement
}
I have a Backbone multipage app written with the use of RequireJS. Since it's multipage I decided not to use a router as it got too messy. I've tried multiple ways of creating a singleton object to be used throughout the app
var singletonModel= Backbone.Model.extend({
}),
return new singletonModel;
For the above I'm just referencing the singletonModel model in my class using the define method and then calling it as is
this.singleton = singletonModel;
this.singleton.set({'test': 'test'});
On a module on my next page when I then call something similar to
this.singleton = singletonModel;
var test = this.singleton.get('test');
The singleton object seems to get re-initialized and the test object is null
var singletonModel= Backbone.Model.extend({
}, {
singleton: null,
getSingletonModelInst: function () {
singletonModel.singleton =
singletonModel.singleton || new singletonModel;
return singletonModel.singleton;
}
});
return singletonModel;
For the above I'm just referencing the singletonModel model in my class using the define method and then calling it as is
this.singleton = singletonModel.getSingletonModelInst();
this.singleton.set({'test': 'test'});
On a module on my next page when I then call something similar to
this.singleton = singletonModel.getSingletonModelInst();
var test = this.singleton.get('test');
Again it looks like the singleton object is getting re-initialized and the test object is null.
I'm wondering if the issue is because I'm using a multi-page app with no router so state is not been preserved? Has anyone tried using a singleton object in a multi-page app before? If so did you do anything different to how it's implemented on a single-page app?
Thanks,
Derm
Bart's answer is very good, but what it's not saying is how to create a singleton using require.js. The answer is short, simply return an object already instanciated :
define([], function() {
var singleton = function() {
// will be called only once
}
return new singleton()
})
Here we don't have a singleton anymore :
define([], function() {
var klass = function() {
// will be called every time the module is required
}
return klass
})
It's may sound a little ... but, you doing a multi-page application, so when you move to next page, a whole new document was loaded into the browser, and every javascript on it will be loaded too, include require.js and your model. so the require.js was reloaded, and it create your model again, so you got a different model than you thought.
If above was true, my opinion is your model will "live" on a single page, when you jump to then next page, that model was "kill"ed by browser. so If you want see it again, store it on somewhere else, maybe server or localstroe, on the former page. and in the next page load it back from server or localstore, and wrap it into a Backbone model, make it "live" again.
Here is how I implemented a singleton in a recent Backbone/Require application. State is remembered across any number of views.
instances/repoModel.js
define(['models/Repo'],
function(RepoModel){
var repoModel = new RepoModel();
return repoModel;
}
);
models/Repo.js
define(['backbone'],
function(Backbone){
return Backbone.Model.extend({
idAttribute: 'repo_id'
});
}
);
views/SomePage.js
define(['backbone', 'instances/repoModel'],
function(Backbone, repoModel) {
return Backbone.View.extend({
initialize: function() {
repoModel.set('name', 'New Name');
}
});
}
);
I'm trying to working with backbone but I'm missing it's base concepts because this is the first JavaScript MVVM Framework I try.
I've taken a look to some guide but I think I still missing how it should be used.
I'll show my app to get some direction:
// Search.js
var Search = {
Models: {},
Collections: {},
Views: {},
Templates:{}
};
Search.Models.Product = Backbone.Model.extend({
defaults: search.product.defaults || {},
toUrl:function (url) {
// an example method
return url.replace(" ", "-").toLowerCase();
},
initialize:function () {
console.log("initialize Search.Models.Product");
}
});
Search.Views.Product = Backbone.View.extend({
initialize:function () {
console.log("initialize Search.Views.Product");
},
render:function (response) {
console.log("render Search.Views.Product");
console.log(this.model.toJSON());
// do default behavior here
}
});
Search.Models.Manufacturer = Backbone.Model.etc...
Search.Views.Manufacturer = Backbone.View.etc...
then in my web application view:
<head>
<script src="js/jquery.min.js"></script>
<script src="js/underscore.min.js"></script>
<script src="js/backbone/backbone.min.js"></script>
<script src="js/backbone/Search.js"></script>
</head>
<body>
<script>
var search = {};
search.product = {};
search.product.defaults = {
id:0,
container:"#search-results",
type:"product",
text:"<?php echo __('No result');?>",
image:"<?php echo $this->webroot;?>files/product/default.png"
};
$(function(){
var ProductModel = new Search.Models.Product();
var ProductView = new Search.Views.Product({
model:ProductModel,
template:$("#results-product-template"),
render:function (response) {
// do specific view behavior here if needed
console.log('render ProductView override Search.Views.Product');
}
});
function onServerResponse (ajax_data) {
// let's assume there is some callback set for onServerResponse method
ProductView.render(ajax_data);
}
});
</script>
</body>
I think I missing how Backbone new instances are intended to be used for, I thought with Backbone Search.js I should build the base app like Search.Views.Product and extend it in the view due to the situation with ProductView.
So in my example, with render method, use it with a default behavior in the Search.js and with specific behavior in my html view.
After some try, it seems ProductModel and ProductView are just instances and you have to do all the code in the Search.js without creating specific behaviors.
I understand doing it in this way make everything easiest to be kept up to date, but what if I use this app in different views and relative places?
I'm sure I'm missing the way it should be used.
In this guides there is no code used inside the html view, so should I write all the code in the app without insert specific situations?
If not, how I should write the code for specific situations of the html view?
Is it permitted to override methods of my Backbone application?
Basically, you should think of the different parts like this:
templates indicate what should be displayed and where. They are writtent in HTML
views dictate how the display should react to changes in the environment (user clicks, data changing). They are written in javascript
models and collections hold the data and make it easier to work with. For example, if a model is displayed in a view, you can tell the view to refresh when the model's data changes
then, you have javascript code that will create new instances of views with the proper model/collection and display them in the browser
I'm writing a book on Marionette.js, which is a framework to make working with Backbone easier. The first chapters are available in a free sample, and explain the above points in more detail: http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf
I have the following problem with backbone and I'd like to know what strategy is the more appropriated
I have a select control, implemented as a Backbone view, that initially loads with a single option saying "loading options". So I load an array with only one element and I render the view.
The options will be loaded from a collection, so I fire a fetch collection.
Then I initialize a component that is in charge of displaying in line errors for every field. So I save a reference of the dom element of the combo.
When the fetch operation is finally ready, I rerender the control with all the options loaded from the collection.
To render the view I user something like this:
render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
}
pretty standard backbone stuff
the problem is that after rendering the view for the second time the reference of the dom is no longer valid,
perhaps this case is a bit strange, but I can think of lots of cases in which I have to re-render a view without losing their doms references (a combo that depends on another combo, for example)
So I wonder what is the best approach to re-render a view without losing all the references to the dom elements inside the view...
The purpose of Backbone.View is to encapsulate the access to a certain DOM subtree to a single, well-defined class. It's a poor Backbone practice to pass around references to DOM elements, those should be considered internal implementation details of the view.
Instead you should have your views communicate directly, or indirectly via a mediator.
Direct communication might look something like:
var ViewA = Backbone.View.extend({
getSelectedValue: function() {
return this.$(".combo").val()
}
});
var ViewB = Backbone.View.extend({
initialize: function(options) {
this.viewA = options.viewA;
},
doSomething: function() {
var val = this.viewA.getSelectedValue();
}
});
var a = new ViewA();
var b = new ViewB({viewA:a});
And indirect, using the root Backbone object as a mediator:
var ViewA = Backbone.View.extend({
events: {
"change .combo" : "selectedValueChanged"
},
selectedValueChanged: function() {
//publish
Backbone.trigger('ViewA:changed', this.$('.combo').val());
}
});
var ViewB = Backbone.View.extend({
initialize: function(options) {
//subscribe
this.listenTo(Backbone, 'ViewA:changed', this.doSomething);
},
doSomething: function(val) {
//handle
}
});
var a = new ViewA();
var b = new ViewB();
The above is very generic, of course, but the point I'm trying to illustrate here is that you shouldn't have to worry whether the DOM elements are swapped, because no other view should be aware of the element's existence. If you define interfaces between views (either via method calls or mediated message passing), your application will be more maintainable and less brittle.
I am trying to use iScroll4 inside a backbone.js application. I have several dynamically loaded lists, and I want to initialize iScroll after the appropriate view has loaded.
I'm trying to call 'new iScroll' when the list view finishes loading, but cannot for the life of me figure out how to do this.
Has anyone gotten these two to work together? Is there an example out there of a backbone view initializing a scroller once its element has loaded?
you are correct, you have to load the view first,
or defenately refresh iscroll afterwards
in our applications, we usually use the render method to render the view
and have a postRender method that handles initialization of these extra plugins like iscroll
of course you need some manual work to get it done but this is the gist of it:
var myView = Backbone.View.extend({
// more functions go here, like initialize and stuff... but I left them out because only render & postRender are important for this topic
// lets say we have a render method like this:
render: function() {
var data = this.collection.toJSON();
this.$el.html(Handlebars.templates['spotlightCarousel.tmpl'](data));
return this;
},
// we added the postRender ourself:
postRender: function() {
var noOfSlides = this.collection.size();
$('#carouselscroller').width(noOfSlides * 320);
this.scroller = new IScroll('carouselwrapper', {
snap: true,
momentum: false,
hScrollbar: false
});
}
});
now the calling of these methods
we did this outside our view as we like some view manager to handle this
but it boils down to this
var col = new myCollection();
var view = new myView({ collection: col });
$('#wrapper').html(view.render().$el); // this chaining is only possible due to the render function returning the whole view again.
// here we always test if the view has a postRender function... if so, we call it
if (view.postRender) {
view.postRender();
}