I am new to backbone.js. I am trying to call a function which loads the template with data coming from webapi.
var BrowseNavListView = Backbone.View.extend({
el: $("#tocDrawerNav"),
initialize: function () {
debugger;
$("#hfReferenceId").val($("#hfChannelId").val());
_.bindAll(this, 'rendersCollectively', 'RenderFocusAreaBladeContent');
this.render();
},
render: function () {
debugger;
var that = this;
var navigator = new Navigators();
navigator.fetch({
success: function (navigatorList) {
debugger;
if (navigatorList.length > 0) {
**RenderFocusAreaBladeContent(navigatorList);**
}
},
error: function (x) {
debugger;
alert(x);
}
})
},
RenderFocusAreaBladeContent: function (navigatorList) {
debugger;
divIterator = divIterator.split('_')[divIterator.split('_').length - 2] + "_"
+ (parseInt(divIterator.split('_')[divIterator.split('_').length - 1]) + parseInt(1)).toString();
var template = '<div class="tocColumn " id="' + divIterator + '"><label>US Channel</label>';
var navigatorListmodel = navigatorList.toJSON();
var content = Loadtemplates("browsetemplate");
var browsetemplate = Handlebars.compile(content);
template += browsetemplate({ navigatorList: navigatorListmodel });
$("#tocDrawerNav").append(template);
$('.view').unbind('click');
$('.view').click(function (n) {
divIteratorBlade = "divIteratorBlade_1";
$("#tocColumns").empty();
$("#hfReferenceId").val("SUB" + n.currentTarget.id);
var browseNested = new BrowseListViewBlade();
browseNested.render(n);
});
}
});
I am getting uncaught reference error while calling RenderFocusAreaBladeContent() inside render
shouldn't it be
that.RenderFocusAreaBladeContent(navigatorList);
?
Related
var node = Backbone.Model.extend({
defaults: function () {
return {
tag: null,
value: null
};
}
});
var elements = Backbone.Collection.extend({
model: node,
url: "/api/xml/get",
parse: function (data) {
var $xml = $(data);
return $xml.map(function () {
var tag = $(this).each(function () {
$(this).tagName;
});
return { tag: tag };
}).get();
},
fetch: function (options) {
options = options || {};
options.dataType = "xml";
return Backbone.Collection.prototype.fetch.call(this, options);
}
});
var elementsView = Backbone.View.extend({
initialize: function () {
this.listenTo(this.collection, "sync", this.render);
},
render: function () {
console.log(this.collection.toJSON());
}
});
var eles = new elements();
new elementsView({ collection: eles });
eles.fetch();
First line errors out with the subject line using Backbone.js latest. Trying to get a simple demo working with it unable to resolve this myself. underscore.js is referenced.
This method was added in underscore version 1.8.3. You probably have an old version.
In the router I do this
function test() {
self.topbarView = new TopbarView();
self.topbarView.render();
GhostviewHunter.addView(self.topbarView);
}
function clean() {
console.log(GhostviewHunter.currentViews.length);
GhostviewHunter.clean();
}
setInterval(test, 1000);
setInterval(clean, 1000);
ghostviewhunter should clean/remove the views:
define('ghostviewHunter', [], function() {
var GhostviewHunter = function() {};
GhostviewHunter.prototype.currentViews = [];
GhostviewHunter.prototype.addView = function(view) {
this.currentViews.push(view);
}
GhostviewHunter.prototype.clean = function() {
_.each(this.currentViews, function(view) {
view.remove();
});
this.currentViews.length = 0;
}
GhostviewHunter.__instance = null;
GhostviewHunter.getInstance = function() {
if( GhostviewHunter.__instance == null ) {
GhostviewHunter.__instance = new GhostviewHunter();
}
return GhostviewHunter.__instance;
}
return GhostviewHunter.getInstance();
})
TopView is fetching a model, the model is updated every 1seconde with setInterval function.
I thought that remove(); would be enough be the memory leak is very quick when I monitor the app.
Any idea ?
EDIT:
TOPBARVIEW
define('topbarView', [
'backbone',
'parameterManager',
'text!views/topbarView/topbarTemplate.html',
'drupalidModel',
'weatherModel',
'refreshTime',
'dateParser'
], function(Backbone, ParameterManager, TopbarTemplate, DrupalidModel, WeatherModel, RefreshTime, DateParser) {
var TopbarView = Backbone.View.extend({
el: '#topbar',
template: _.template(TopbarTemplate),
events: {},
initialize: function() {
var self = this;
_.bindAll(this, 'render', 'startDateRefresh');
this.dateParser = new DateParser();
self.startDateRefresh();
setInterval(self.startDateRefresh, RefreshTime.date);
this.initWeatherModel();
},
render: function() {
var self = this;
var data = {
picto_url : ParameterManager.get('WEATHER_RESOURCE_URL') + ParameterManager.get('WEATHER_PICTO_CODE') + ".png",
date: self.date
}
this.$el.html(this.template({data: data}));
},
initWeatherModel: function() {
var self = this;
var weather_url = ParameterManager.get('WEATHER_URL');
if(weather_url === null) {
this.drupalidModel = new DrupalidModel();
this.drupalidModel.fetch({
success: function(model, response) {
var center_id_num = model.get('center_id_num');
ParameterManager.set('DRUPAL_CENTER_ID_NUM', center_id_num);
ParameterManager.constructWeatherUrl();
self.model = new WeatherModel();
self.listenTo(self.model,'change', self.render);
self.startModelRefresh();
},
error: function() {
console.log("Failed to fetch center id!");
}
})
} else {
this.model = new WeatherModel();
self.listenTo(self.model,'change', self.render);
this.startModelRefresh();
};
},
startModelRefresh: function() {
var self = this;
this.modelRefresh = function() {
self.model.fetch();
}.bind(this);
self.modelRefresh();
setInterval(self.modelRefresh, RefreshTime.weather);
},
stopModelRefresh: function() {
var self = this;
clearInterval( self.modelRefresh );
},
startDateRefresh: function() {
var self = this;
this.date = this.dateParser.classicDate();
this.render();
}
});
return TopbarView;
})
As fbynite suggested, your code which is supposed to clear the interval(s) is not correct, you should pass the interval id to clearInterval.
apart from that, you're not calling stopModelRefresh() at all. You should make sure all external references are properly removed before removing the view. For example I've added a destroy method that clears the interval before removing the view:
var TopbarView = Backbone.View.extend({
el: '#topbar',
template: _.template(TopbarTemplate),
events: {},
initialize: function() {
},
render: function() {
},
modelRefresh: function() {
this.model.fetch();
},
startModelRefresh: function() {
this.modelRefresh();
this.intervalId = setInterval(_.bind(this.modelRefresh,this), RefreshTime.weather);
},
stopModelRefresh: function() {
clearInterval(this.intervalId);
},
destroy: function() {
this.stopModelRefresh();
this.remove();
}
});
Now your GhostviewHunter should call it instead of directly calling remove:
GhostviewHunter.prototype.clean = function() {
_.each(this.currentViews, function(view) {
view.destroy();
});
this.currentViews.length = 0;
}
or you can even override the remove method itself to something like:
remove: function(){
this.stopThisInterval();
this.stopThatInterval();
this.cleanUpSomethingElse();
Backbone.View.prototype.remove.call(this);
}
and have the ghost thingy call remove itself.
Note that you have other interval calling startDateRefresh which you're not even attempting to clear... You should clear all such similarly.
And as a side note, I strongly suggest to stop spamming self = this where it is totally unnecessary for eg:
stopModelRefresh: function() {
var self = this;
clearInterval( self.modelRefresh );
// Why..? Nothing here changes the context?
},
and I also suggest recursively calling modelRefresh once the current fetch succeeds/fails rather than calling it from an interval where you have no guarantee that the previous fetch is complete
i'm working with Backbone and when I generate the view I have the error Cannot read property 'push' of undefined". The line of the error is "self.subViewsReservas.push(new ReservaView({" in the push.
ReservaCollectionView = Backbone.View.extend({
initialize: function () {
if (Session.get('authenticated') && Session.get('authenticated') !== false) {
this.paginacionVista = new PaginacionReservasView({
collection: this.collection,
el: '.paginacionReservas',
reservasPagina: 5,
});
this.buscadorVista = new BuscadorView({
el: 'div.buscador-reservas',
//Pasamos la colección oficinas ya que hará las veces del conjunto de oficinas retornadas por el servidor
collection: new OficinasCollection(oficinas),
});
}
else {
}
},
render: function () {
var self = this;
this.template = _.template($('#divReservaTpl').html(), {});
self.$('.contenedor-reservas').empty();
self.collection.each(function (reserva, index) {
self.$('.contenedor-reservas').append(self.template({'data': reserva.toJSON()}));
});
this.collection.each(function (reserva, index) {
this.subViewsReservas = [];
self.subViewsReservas.push(new ReservaView({
el: '#' + reserva.get('Idreserva'),
model: reserva
}));
});
this.collection.each(function (reserva, index) {
//Limite de la paginacion 5 limite arbitrario
if (index < 5) {
//Lo Marcamos como visible y actualiazamos la paginación
self.collection.get(reserva.get('Idreserva')).set({'Visibilidad': true});
}
});
this.paginacionVista.render();
return this;
},
});
AppView = Backbone.View.extend({
initialize : function(){
var self = this;
self.usu = new UsuarioModel();
self.usu.fetch({
success: function (model){
Session.fetch({
success : function (){
Session.set('nombre',model.get('Nombre'));
Session.set('apellidos',model.get('Apellidos'));
Session.set('puntos_club',model.get('Puntosclub'));
self.render();
}
});
self.sideBar = new SideBarView({
el : '.sidebar',
model: model
});
self.sideBar.markOption('mis-reservas');
AppView = Backbone.View.extend({
initialize : function(){
var self = this;
self.usu = new UsuarioModel();
self.usu.fetch({
success: function (model){
Session.fetch({
success : function (){
Session.set('nombre',model.get('Nombre'));
Session.set('apellidos',model.get('Apellidos'));
Session.set('puntos_club',model.get('Puntosclub'));
self.render();
}
});
self.sideBar = new SideBarView({
el : '.sidebar',
model: model
});
self.sideBar.markOption('mis-reservas');
},
error : function (){
document.location = '/mygoldcar/login';
}
});
this.listenTo(Session, 'change', self.update);
},
render : function(){
var self = this;
var reservas = new ReservasCollection();
reservas.fetch({
success: function (collection){
if ( typeof collection.models[0].get('error') == 'undefined' || !collection.models[0].get('error')) {
var listRes = new ReservaCollectionView({
el : '.reservas-list',
collection: collection
});
listRes.render();
var popoverModel = new Popover();
popoverModel.setData(collection.models[0].get('kilometraje_ilimitado'), collection.models[0].get('duracion'));
self.popover = new PopoverView({
el: 'body',
model: popoverModel
});
self.popover.establecerPopover();
}
else document.location = '/mygoldcar' + self.urlLang(lang) + '/mi-cuenta/#msg/1';
},
error: function () {
document.location = '/mygoldcar' + self.urlLang(lang) + '/mi-cuenta/#msg/1';
}
});
},
update: function() {
var self = this;
self.sideBar.update(Session.get('nombre'),Session.get('apellidos'),Session.get('puntos_club'));
self.$el.find('.nombre-usuario').text(Session.get('nombre'));
},
updatePoints: function() {
var self = this;
self.usu.fetch({
success: function (model){
Session.set('puntos_club',model.get('Puntosclub'));
}
});
}
}); },
error : function (){
document.location = '/mygoldcar/login';
}
});
this.listenTo(Session, 'change', self.update);
},
render : function(){
var self = this;
var reservas = new ReservasCollection();
reservas.fetch({
success: function (collection){
if ( typeof collection.models[0].get('error') == 'undefined' || !collection.models[0].get('error')) {
var listRes = new ReservaCollectionView({
el : '.reservas-list',
collection: collection
});
listRes.render();
var popoverModel = new Popover();
popoverModel.setData(collection.models[0].get('kilometraje_ilimitado'), collection.models[0].get('duracion'));
self.popover = new PopoverView({
el: 'body',
model: popoverModel
});
self.popover.establecerPopover();
}
else document.location = '/mygoldcar' + self.urlLang(lang) + '/mi-cuenta/#msg/1';
},
error: function () {
document.location = '/mygoldcar' + self.urlLang(lang) + '/mi-cuenta/#msg/1';
}
});
},
update: function() {
var self = this;
self.sideBar.update(Session.get('nombre'),Session.get('apellidos'),Session.get('puntos_club'));
self.$el.find('.nombre-usuario').text(Session.get('nombre'));
},
updatePoints: function() {
var self = this;
self.usu.fetch({
success: function (model){
Session.set('puntos_club',model.get('Puntosclub'));
}
});
}
});
Inside collection.each, this points to the collection. So the property subViewsReservas is added to it, not the view instance. When you try to access it like self.subViewsReservas.push, self points to the view instance, which doesn't have subViewsReservas property, hence the error.
Initializing an array inside each like you're doing isn't doing much since it'll be reset with each invocation of the callback.
You should be initializing it in the initialize method, which is the right place to initialize things, where this will correctly point to the view instance as shown below
initialize: function () {
this.subViewsReservas = [];
}
For some reason if you want the collection to reset everytime, you can change the context to view by passing it as second argument to each like:
this.collection.each(function (reserva, index) {
this.subViewsReservas = [];
self.subViewsReservas.push(new ReservaView({
el: '#' + reserva.get('Idreserva'),
model: reserva
}));
}, self); // <--- makes view the context of callback,
// both 'self' and 'this' will refer to view
this is my controller code
$scope.loadMajorObjects = function () {
var appId = $scope.currentAppId;
var type = $scope.majorObject.type;
if (_.isEmpty(appId))
return;
var cacheKey = { key: cacheKeys.objectTypeList($scope.asCacheOptions({ ObjectType: type })) };
return dataFactory.get("/MajorObject/All?applicationId=" + appId + "&type=" + type, { cache: cacheKey })
.then(function (result) {
$scope.majorObjects = result.data.data;
$scope.majorObjectsList = $scope.majorObjects.slice(0, $scope.itemsPerPage);
$scope.totalItems = $scope.majorObjects.length;
$scope.isLoad = true;
});
};
and this is test case and in this i am calling $scope.loadMajorObject
describe("Testing MajorObjectsCtrl", function () {
//checking dataFactory.get called only once
it("should call dataFactory.get and called only once", function () {
scope.currentAppId = mockApplicationId;
scope.applications = applicationsMockData;
scope.itemsPerPage = 10;
$controller('AppSettingCtrl',
{
$scope: scope,
dataFactory: mainmockdataFactory
});
expect(mockdataFactory.get.calls.count()).toBe(0);
scope.currentAppId = mockApplicationId;
scope.majorObjects.slice();
scope.loadMajorObjects();
scope.$digest();
expect(mockdataFactory.get).toHaveBeenCalled();
expect(mockdataFactory.get.calls.count()).toBe(1);
});
when i call this function it is throwing and exception as object doesn't support property or method 'slice', how to rectify this?
Already a couple of hours struggle trying to solve this...
Although the model gets fetched correctly and I can verify it as the view gets informed of the model's 'change' event, it just does not render.
At startup, the default model data ('Test Project'), is correctly displayed in the view, but after the model is refreshed, the view is not refreshed.
I tried to show a new view in the layout after model refresh but it did not change much...
Any idea or opinion about this ?
App.Project = function () {
var Project = {};
var ProjectModel = Backbone.Model.extend({
defaults:{
id: 0,
name: "Test Project",
intro: "",
desc: ""
},
initialize: function () {
// Flag fetch status to avoid multiple simultaneous calls
this.loading = false;
var self = this;
App.vent.on("project:display", function (_id) { self.fetchProject(_id); });
},
fetchProject: function (_id) {
if (this.loading)
return true;
this.loading = true;
var self = this;
var id = _id;
this.url = 'data.project_'+id+'.json';
this.fetch({
success: function (_data) {
self.loading = false;
},
error: function () {
self.loading = false;
}
});
}
});
Project.Details = new ProjectModel();
var Layout = Backbone.Marionette.Layout.extend({
template: "#project-layout",
regions: { details: "#project_details" }
});
Project.initializeLayout = function () {
Project.layout = new Layout();
App.content.show(App.Project.layout);
};
App.addInitializer(function () {
App.Project.initializeLayout();
});
Project.display = function () {
App.Project.Views.showDetails(Project.Details);
App.vent.trigger("project:display", 1);
}
return Project;
}();
App.Project.Views = function () {
var Views = {};
var DetailView = Backbone.Marionette.ItemView.extend({
template: "#project-details-template",
tagName: "div",
initialize: function () {
//this.listenTo(this.model, "change", this.render, this);
},
modelEvents: {
'change': "modelChanged"
},
modelChanged: function() {
console.log(this.model);
this.render();
}
});
Views.showDetails = function (_project) {
var projectView = new DetailView({model: _project});
App.Project.layout.details.show(projectView);
};
return Views;
}();
App.ProjectRouting = function () {
var ProjectRouting = {};
ProjectRouting.Router = Backbone.Marionette.AppRouter.extend({
initialize: function (_options) {
this.route('project/', "displayProject", _options.controller.display);
}
});
App.vent.on("project:display", function (_id) {
App.navigate("project/");
});
App.addInitializer(function (_options) {
ProjectRouting.router = new ProjectRouting.Router({
controller: App.Project
});
});
return ProjectRouting;
}();