In addone i m creating new object of view like that
this.section = "aaa";
var sectionview = new AA(model:this.model,section:this.section);
section is global variable of another view that i m passing to AA view.But after passing section its value get change at end of add one like this
this.section = "aaa";
var sectionview = new AA(model:this.model,section:this.section);
.
.
.
.
.
.
this.section = "sss";
then how i can update value of section that i passed at time of creation of view AA???
Expected answer is
this.options.section = "sss" not "aaa"
in AA view
The usual approach to this sort of thing is to extend Backbone.Events to build a global pub/sub event dispatcher:
window.pub_sub = _({}).extend(Backbone.Events);
Then your view could listen for events from pub_sub:
initialize: function() {
this.listenTo(pub_sub, 'change:section', this.section_changed);
//...
},
section_changed: function(section) {
this.section = section;
// And whatever else needs to happen...
}
Then trigger the event when you change the section:
pub_sub.trigger('change:section', new_section_value);
You'd want to funnel all changes to the global section through a single function call somewhere to ensure that the events are triggered but you should be doing that sort of thing anyway.
Demo: http://jsfiddle.net/ambiguous/rPtfS/
If you need these settings to persist then change pub_sub to a global settings model and use the usual model persistence mechanisms.
Related
I'm using a LayoutView to display a collection in table form. When a user clicks on a tr I swap the CompositeView for an ItemView that shows the details using the same region. It all works except the functionality of the back button is broken. Is there a way to trap the back event and switch views?
Or should I use two Views and pass the model id and then refetch the model? The problem with that though is the extra request and I lose the filter and sort values of the table unless I use local storage.
Including more code would be better, but in any case I will try to give some guidance for your problem.
To avoid fetching the data twice, you can keep a common object in a "parent" component, for example in the Router.
var theObject;
var router = Marionette.AppRouter.extend({
routes: {
"routeA/:id": "goToRouteA",
"routeB/:id": "goToRouteB"
},
goToRouteA: function(id) {
MyRegion.show(new myLayout({
model: this._getCommonObject(id)
}));
},
goToRouteB: function(id) {
MyRegion.show(new myLayout({
model: this._getCommonObject(id)
}));
},
/*Return the common object for the views*/
_getCommonObject: function(id) {
theObject = (theObject && theObject.get('id') == id) ? theObject : MyApp.request('getTheObject');
return theObject;
}
});
In this way, you can keep the reference to the same object without loosing information.
You just have to make sure to delete the object when it is not needed to avoid keeping old information, for example on the Region close event.
I have read many posts about the issue of multiple instances of the same backbone view being instantiated every time and the view hangs around in the DOM even after it's not used any more, and how to fix this by using this.remove() and this.unbind()
But how to remove the variables declared inside the view, like so:
var myview = Backbone.View.extend({
el : '#somediv',
var1 : '',
var2 : '',
array1 : [],
initialize : function() { //init code here
},
render : function() { //rendering code here
}
});
So my question is, how do i remove instances of those variables declared there: var1, var2, array1. I have to call this view every time i click on a button. And every time i see the previous values of these variables still there. this.remove() and this.unbind() might just remove the view from DOM and undelegate its events bindings.
The properties you define inside the Backbone.View.extend call are attached to the prototype and thus are shared by all instances of your view (i.e. they're sort of like class properties rather than instance properties). This should be fine with your var1 and var2 as you'd just be assigning new values per-instance; the array1 array and similar properties can be problematic though; suppose you do this:
var v = new myview;
v.array1.push('pancakes');
Creating a new instance won't deep-copy everything out of the prototype so v.array1 will refer to the array in the prototype. That means that the next new myview will already have 'pancakes'.
The usual solution is to initialize instance properties in the constructor. For Backbone, the constructor is initialize:
var myview = Backbone.View.extend({
el: '#somediv',
initialize: function() {
this.var1 = '';
this.var2 = '';
this.array1 = [ ];
},
//...
});
You can also run into problems with your el: '#somediv' as that uniquely identifies a single DOM element. As long as you're removing and recreating that element then you should be okay; I'd recommend letting the view create and destroy its own el though, you run into fewer zombies and leaks that way.
I've setup a calendar using FullCalendar with Angular UI. It works fine, I can toggle categories of events nicely, but every time the eventSource is updated the calender view is set to the current date.
I've tried using the gotoDate method and I can see that it works (it also works from the console), but almost immediately after the calender is reverted to the current date. As I'm new to AngularJS I've probably put the gotoDate in the wrong place. But I'm clueless were to put it elsewhere.
I'm using a service that returns a bunch of event objects and pushes them into eventSources, the ng-model of the calendar element. Nothing special, in the controller I have:
$scope.eventSources = [];
var promise = UserCalendarEvents.get(groupName);
promise.then(
function(events) {
$scope.eventSources.push(events);
$('#events-calendar').fullCalendar('gotoDate', 2012, 11);
},
function(reason) {
console.log('Error: ' + reason);
}
);
In this case events are fetched and $scope.eventSources is populated. The calender view is then set to december 2012 and after that, almost instantly, the view swithes to current date. Is it some kind of watch of the ng-model that rerenders the fullcalender and if so how can I set the date of choice?
Update: I ended using joshkurz fix, but in a modified version that honors the selected view, ie if the user has selected basicWeek and changes source data the view shouldn't change to for example month view. That's what I need for my users.
function update() {
scope.calendar = elm.html('');
var view = scope.calendar.fullCalendar('getView');
var m;
var xtraOptions = {};
//calendar object exposed on scope
if(view){
var viewDate = new Date(view.start);
if(m !== 'Invalid Date'){
y = viewDate.getFullYear();
m = viewDate.getMonth();
d = viewDate.getDate();
if(!isNaN(y) && !isNaN(m) && !isNaN(d)){
xtraOptions = {
year: y,
month: m,
date: d
};
}
}
view = view.name; //setting the default view to be whatever the current view is. This can be overwritten.
}
/* If the calendar has options added then render them */
var expression,
options = { defaultView : view, eventSources: sources };
if (attrs.uiCalendar) {
expression = scope.$eval(attrs.uiCalendar);
// Override defaultView if is set in ui-calendar attribute - OK?
if (expression.defaultView) {
expression.defaultView = view;
}
} else {
expression = {};
}
angular.extend(options, uiConfig.uiCalendar, expression, xtraOptions);
scope.calendar.fullCalendar(options);
}
This is a bug with the calendar. You are the first one to say anything about it on StackOverflow. Kudos.
There are a couple of ways that this could be fixed. Its been proposed on github https://github.com/angular-ui/angular-ui/pull/520 that we do away with how the directive re-creates itself anytime the watch is fired, which would stop this behavior. I believe that if we can get this method to work in production then it will be the best solution.
Until then however the fix is to get the current month from a date object created from the view.start field. This month should be added to the options which are used to render the calendar.
Here is a snippet of what the new update function should look like inside of the calendar directive.
/* update the calendar with the correct options */
function update() {
scope.calendar = elm.html('');
var view = scope.calendar.fullCalendar('getView');
var m;
var xtraOptions = {};
//calendar object exposed on scope
if(view){
var d = new Date(view.start);
m = new Date(view.start);
if(m !== 'Invalid Date'){
m = m.getMonth();
if(!isNaN(m)){
xtraOptions = {
month: m
};
}
}
view = view.name; //setting the default view to be whatever the current view is. This can be overwritten.
}
// console.log(m)
/* If the calendar has options added then render them */
var expression,
options = {
defaultView : view,
eventSources: sources
};
if (attrs.exCalendar) {
expression = scope.$eval(attrs.exCalendar);
} else {
expression = {};
}
angular.extend(options, uiConfig.exCalendar, expression, xtraOptions);
scope.calendar.fullCalendar(options);
}
This has not been properly tested on the angular-ui CI server, but it works fine as I am using it in production currently.
With AngularUI wrapping FullCalendar in a directive for you, the calendar object can be accessed via $scope.calendar. "The AngularJS Way" is to avoid direct DOM manipulation in controllers.
In your particular case, you'd write this instead:
$scope.calendar.fullCalendar('gotoDate', 2012, 11);
AngularUI does have a watch on eventSource and event that calls an update function every time the length of either changes. You can view the source here:
https://github.com/angular-ui/angular-ui/blob/master/modules/directives/calendar/calendar.js
You can see that the calendar object at $scope.calendar gets recreated with a new set of events everytime the event model changes. This is why your date change isn't going through -- the event is being added, triggering the update, your date change goes in, the whole calendar is changed and your date change is lost.
Two (not the best) things pop up at me without changing AngularUI's code:
You can use AngularJS's $timeout service and wait a set
time after events are loaded, the calendar is finished updating,
then call your date change.
You can add a $watch on the scope that triggers your date change
everytime the calendar object changes:
http://plnkr.co/edit/Ww08VX?p=preview
I created that example above. In the test() method, I'm just loading some fake data into events via a promise (they'll be added in March 2013) then changing the date to December 2012. I'm watching $scope.calendar and everytime it changes (an update is triggered in the directive) I resend the date command. You should be sent to December 2012 without even seeing the new events go in, but if you go back to March 2013, they should be there. I stuck the watch in another .then assuming you'll use some value that's returned to set the date dynamically.
Another way to solve the issue without changing the Angular-UI source is to declare the calendar like this:
<div ui-calendar="{viewDisplay:viewDisplayHandler,month:monthVal,year:yearVal}" ng-model="eventsArr"></div>
And to have a viewDisplayHandler function in the scope that sets monthVal and yearVal to the appropriate values in order to have the date on the calendar set after the whole calendar recreation:
$scope.viewDisplayHandler = function(view) {
var viewStart = view.start;
$scope.yearVal = viewStart.getFullYear();
$scope.monthVal = viewStart.getMonth();
}
This is how i solved it before issuing the pull request on GitHub; it's not the optimal method i guess, but i have been using it in production for a while and it seems to be ok and does not require changing Angular-UI's code.
I have got:
Ext.define("catcher.view.Login", {
extend: "Ext.form.Panel",
// creating login form, including selectfield
Store "Tournaments" is created in stores (autoload:true), have its model. Everyting is set.
need to dynamicly fill selectfield (still in view.Login class):
initialize: function(){
var store = Ext.getStore("Tournaments");
var options = new Array();
store.each(function(radek){
options[radek.get("tournament_id")] = radek.get("tournament_name");
});
}
I do not want to use store:"Tournaments" config options, because of later form.submit(); does not send correct data from selectfield.
There is the problem: console.log(store.getCount()); returns 0. Using store.add({ ... }) I can add anything and getCount() returns corrent count (0 + add()).
Weird part: console.log(store) returns whole class including data object with all items inside. And next weird part - If I use the same code in controller, everything works, the Store is loaded properly and I can use mystore.each();
Store loading is asynchronous, by the time you're accessing it, it's not loaded. You need to listen to the store load event.
Something like:
store.on('load', function(storeRef, records, successful){
//Loop through records
}, this);
on() documentation
load event documentation
In one of by Backbone.js views I am updating the attribute "read" of the current model (instance of Message) by using this.model.set( { read: true } );. I verified that this command is only executed once (I know about "ghost events"). As you can see below I configured the Collection to fire an update event in which the whole Collection gets saved into a variable.
Unfortunately the saveToVar function gets called 3 times instead of one! Also, the first time saveToVar is called, this correctly consists of all the collection's models, whilst the 2nd and 3rd time this only has one model, namely the one I did the update on.
I tracked everything down piece by piece but I have no clue why this happens.
window.Message = Backbone.Model.extend({
});
window.MessageCollection = Backbone.Collection.extend({
model: Message,
initialize: function()
{
this.on("change", this.saveToVar);
},
saveToVar: function(e)
{
App.Data.Messages = this.toJSON();
return;
}
});
In your jsfiddle, you're doing this:
App.Collections.message = new MessageCollection([ ... ]);
var elements = App.Collections.message.where({ id: 4 });
var item = new MessageCollection(elements);
Your where call will return models that are in the message collection, not copies of those models but exactly the same model objects that are in message. Now you have two references to your id: 4 model:
The original one buried inside App.Collections.message.
The one in elements[0].
Both of those references are pointing at the same object. Then you add elements to another MessageCollection. Now you have something like this:
App.Collections.message.models[3] item.models[0]
| |
+--> [{id: 4}] <--+
Both of those collections will be notified about change events on the id: 4 model since collections listen to all events on their members:
Any event that is triggered on a model in a collection will also be triggered on the collection directly, for convenience.
And your collection listens for "change" events in itself:
initialize: function()
{
this.on("change", this.saveToVar);
}
So when you do this:
this.model.set({ read: true });
in your view, both collections will be notified since that model happens to be in both collections.
If we alter your event handler to look like this:
saveToVar: function() {
console.log(_(this.models).pluck('cid'));
}
then you'll see that the same cid (a unique identifier that Backbone generates) appears in both collections. You can also attach a random number to each collection and see what you get in saveToVar: http://jsfiddle.net/ambiguous/mJvJJ/1/
You probably shouldn't have one model in two collections. You probably shouldn't have two copies of the same model kicking around either so cloning elements[0] before creating item might not be a good idea either. You might need to reconsider your architecture.