We Keep Coding

JointJs initializing custom element

I have the following custom element:
var ir = joint.dia.Element.define('my.Rectangle', {
attrs: {
body: {
// ...
},
header: {
// ...
}
}
}, {
initialize: function() {
this.on("change:header", function() {
console.log('header change')
}, this), joint.dia.Element.prototype.initialize.apply(this, arguments)
},
markup: [{
tagName: 'rect',
selector: 'body',
}, {
tagName: 'text',
selector: 'header'
}]
});
I want to break the header's text with joint.util.breakText and set the body's size, to fit in it, every time it changes. (Even first time it set)
After
var rect = new joint.shapes.my.Rectangle()
rect.attr('header/text', 'FooBarBaz')
rect.addTo(graph);
nothing happens, the shape is added to the screen, but nothing in the console log.

change:header will listen to changes in the header property. To listen to this, use rect.prop instead of rect.attr:
rect.prop('header', 'FooBarBaz')
From the docs, at http://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Element.prototype.prop:
This is an equivalent of the attr() method but this time for custom data properties.
To listen to attribute changes, use change:attrs:
this.on('change:header', function (element, opt) {
if (opt.propertyPath === 'attrs/header/text') {
console.log('header change');
}
}, this), joint.dia.Element.prototype.initialize.apply(this, arguments);

Backbone events triggering on phantom views

Scenario
I have inherited older backbone app with master-details scenario. On master view I have list of items (project) and when I click on an item I can edit it on details view (ProjectFormView).
The problem
When I edit the project on ProjectFormView, all the previously opened project are edited with the same values as well.
Details:
I've discovered, that the UI events like input change are triggered also on previously opened ProjectFormViews, so it look like some kind of memory leak.
This is how the view is instantiated:
displayProject: function(appType, appId, projectId) {
if (this.applicationDetailsModel === undefined ||
this.applicationDetailsModel.get('formType') !== appType ||
this.applicationDetailsModel.get('id') !== appId)
{
this.navigateTo = 'projects';
this.navigateToItem = projectId;
this.navigate('form/' + appType + '/' + appId, { trigger: true });
return;
}
var that = this;
require(['views/projectFormView'], function(ProjectFormView) {
var tooltips = that.tooltipsCollection
.findWhere({ form: 'project' })
.get('fields');
if (that.isCurrentView(that.projectFormView, appId, appType) === false) {
that.projectFormView = new ProjectFormView({
el: $content,
tooltips: tooltips,
projectScale: that.projectScale,
workTypes: that.workTypes
});
}
that.projectFormView.listenToOnce(that.projectScale, 'sync', that.projectFormView.render);
that.projectFormView.listenToOnce(that.workTypes, 'sync', that.projectFormView.render);
that.renderItem(that.projectFormView, that.projectsCollection, projectId, 'projects');
that.highlightItem('projects');
});
},
And the view. Notice the comment in SetValue
return ApplicantFormView.extend({
events: {
'change #newProject input': 'processProject',
'change #newProject select': 'processProject',
'change #newProject textarea': 'processProject',
},
template: JST['app/scripts/templates/projectForm.hbs'],
initialize: function (options) {
this.projectScale = options.projectScale;
this.workTypes = options.workTypes;
this.tooltips = options.tooltips;
},
render: function () {
Backbone.Validation.bind(this, {
selector: 'id'
});
this.$el.html(this.template(
{
project: this.model.attributes,
projectScale: this.projectScale.toJSON(),
workTypes: this.workTypes.toJSON(),
appType: profileModel.get('loadedAppType'),
appId: profileModel.get('applicationId')
}
));
this.$('.datepicker').datepicker({
endDate: 'today',
minViewMode: 1,
todayBtn: 'linked',
orientation: 'top auto',
calendarWeeks: true,
toggleActive: true,
format: 'MM yyyy',
autoclose: true
});
this.$('.datepicker').parent().removeClass('has-error');
this.$('.error-msg').hide();
this.$el.updatePolyfill();
this.revalidation();
return this;
},
processProject: function (event) {
this.setValue(event);
this.save();
},
setValue: function (event) {
//This is called on each input change as many times as many projects were previously opened.
event.preventDefault();
var $el = $(event.target),
id,
value;
if ($el.attr('type') === 'checkbox') {
id = $el.attr('id');
value = $el.is(':checked');
} else if ($el.attr('type') === 'radio') {
id = $el.attr('name');
value = $('input:radio[name ="' + id + '"]:checked').val();
} else {
id = $el.attr('id');
value = $el.val();
}
this.model.set(id, value);
Dispatcher.trigger('upd');
},
});
Do you have any tips what could be causing the memory leak?

Looks like all the views are attached to $content. Whenever you create a new view to this element, a new set of event listeners would be attached to this element.
Ideally you should remove existing views before creating new ones to free up memory using view's remove method.
If you can't do this for some reason and want to keep all view objects created in memory at the same time, they need to have their own elements to bind events to.
You can do this by removing el: $content,
This let's backbone create an element for each view.
Then do $content.append(view.el) after the view creation.
You'll have to detach these element from $content while creating new views.

Fire ionicModal on ionicPopup close

I want to open ionic modal whenever the user presses the Yes button, but close ionic popup whenever the user presses the No button. How can I do this?
At the moment, ionic popup opens up in each case. Here is my code so far:
services.js
function PopupService($ionicPopup) {
function acceptAppointmentPopup(scope) {
return $ionicPopup.show({
title: 'Are you sure you want to accept this appointment?',
scope: scope,
buttons: [{
text: '<b>Yes</b>',
type: 'button-positive',
onTap: function(e) {}
}, {
text: 'No',
onTap: function(e) {}
}, ]
})
}
return {
acceptAppointmentPopup: acceptAppointmentPopup
};
}
controller.js
function BusinessPendingAcceptanceCtrl($scope, PopupService, ModalService) {
$scope.newMessageModal = function() {
ModalService.show('templates/modals/new-message.html', 'ConsumerNotificationsCtrl as vm');
}
$scope.showAcceptAppointmentPopup = function() {
$scope.data = {}
var myPopup = PopupService.acceptAppointmentPopup($scope);
myPopup.then(function(res) {
$scope.newMessageModal();
});
};
}

$ionicPopup supports confirm (a YES, NO dialog) which returns a promise and as an argument passes the result. You can use it like this:
$ionicPopup.confirm({ // example taken from official documentation
title: 'Consume Ice Cream',
template: 'Are you sure you want to eat this ice cream?'
}).then(function (result) {
if (result) {
// At this point user confirmed that they want to eat the ice cream,
// so lets open a modal to visually show the user how the ice cream is being consumed
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show();
// This is where the user starts drooling :P
});
} else {
// This user apparently hates ice cream, which is ridiculous...
}
});
You can get more info on the official documentation page.
Integrating my example into your code:
services.js
function PopupService($ionicPopup) {
function acceptAppointmentPopup(scope) {
return $ionicPopup.show({
title: 'Are you sure you want to accept this appointment?',
scope: scope,
buttons: [{
text: '<b>Yes</b>',
type: 'button-positive',
onTap: function(e) {
return true;
}
}, {
text: 'No',
onTap: function(e) {
return false;
}
}]
})
}
return {
acceptAppointmentPopup: acceptAppointmentPopup
};
}
controller.js
function BusinessPendingAcceptanceCtrl($scope, PopupService, ModalService) {
$scope.newMessageModal = function() {
ModalService.show('templates/modals/new-message.html', 'ConsumerNotificationsCtrl as vm');
}
$scope.showAcceptAppointmentPopup = function() {
$scope.data = {}
var myPopup = PopupService.acceptAppointmentPopup($scope);
myPopup.then(function(res) {
if (res) { // Here we check if user pressed Yes - Yes button returns true
$scope.newMessageModal();
}
});
};
}

using OnClick function in Dojo

I cant seem to figure out how to use it - the following has no output
dom.create(
'a',
{
className: 'collapse',
onClick: function(){
console.log("something");
}
},
topPane.containerNode );
also tried
function testMe(){console.log('something')}
dom.create(
'a',
{
className: 'collapse',
onClick: testMe
},
topPane.containerNode );
Also this:
function testMe(){console.log('something')}
dom.create(
'a',
{
className: 'collapse',
onClick: testMe()
},
topPane.containerNode );
the last one causes testMe to be activated when the page is loaded (and not activated after click)

Try this:
var link = new domConstruct.create("a", {
href: "http://www.google.com",
innerHTML: "Google",
'class': "myClassHere",
onclick: "window.open(this.href); return false;",
onkeypress: "window.open(this.href); return false;"
});
or
var link = new domConstruct.create("a", {
href: "http://www.google.com",
innerHTML: "Google",
'class': "myClassHere",
onclick: function() { console.log("onclick"); },
onkeypress: function() { console.log("onkeypress"); }
});
I think that onClick is used when dealing with dojo/dijit/dojox widgets. But when setting events for html elements using the dojo/dom-construct, it is all lowercase (ie "onclick").

use dom-attr(domelement,"click",function(){})
it works
dom element is the one on which the click functionality is to be set.
in your example create a using dom construct and then use the above

Unable to bind click event in Backbone

I can't seem to bind a click event to an action in the snippet below. Any ideas?
var SelectView = Backbone.View.extend({
template: "#select-template",
initialize: function() {
this.render();
},
events: {
"click .placeholder": "optionsDropdown",
},
render: function() {
context = {className: this.className, options: this.model.get("options"), placeholder: this.model.get("placeholder")};
$(this.el).html(getHTML(this.template, context));
},
optionsDropdown: function() {
alert("Hello");
},
});

I think the problem is this line
className: this.className
I don't see the className variable anywhere in the view definition
var SelectView = Backbone.View.extend({
initialize: function () {
this.className = 'placeholder';
},
events: {
"click .placeholder": "optionsDropdown",
},
render: function () {
context = {
className: this.className,
options: this.model.get("options"),
placeholder: this.model.get("placeholder")
};
var template = _.template( $("#select-template").html(), context );
this.$el.html(template);
},
optionsDropdown: function () {
alert("Hello");
},
});
var Model = Backbone.Model.extend({});
var newModel = new Model({
'options' : 'Hello',
'placeholder' : 'Type your name'
});
var newView = new SelectView({model : newModel});
newView.render();
$('.container').append(newView.el);
Check Fiddle
You are binding the click event for the class="placeholder" which is supposed to be in the template. Once you define that it should work provided that you have the element with that class in your template.
Calling render from initialize

You're missing a selector in the event definition. It should be something like this (assuming the input id is optionsId):
events : {
"click #optionsId": "optionsDropDown"
}

you can have a DOM element binded to the handler e.g., "click li":"optionsDropDown"
edit: you are missing the target element.. heres a working fiddle
http://jsfiddle.net/FGeJd/