Titanium - Separate views in 'touchmove' animation - titanium

Question

I am try to do appointment in a dayView in a calander I have build. But when I try to animate one appointment with 'longpress' and 'touchmove' the other appointments goes with, I try to use 'this.' but stil have problem.
Sorry that I hace comment the code on swedish :)
I would Appreciate if some one helped me!
Here is my code..
Ti.include('globalization/sv-SE.js');
Ti.include('core.js');
Ti.include('parser.js');
Ti.include('sugarpak.js');
Ti.include('time.js');
var time = 1;
var myTime = null;
var rows = [];
//Skapa fönstret med vit bakgrund
var win = Ti.UI.createWindow({
backgroundColor : 'white'
});
var calanderHeader = Ti.UI.createView({
width : '100%',
height : '50dp'
});
win.add(calanderHeader);
//Skapa en scrollView till dag-kalenderna
var dayViewScroll = Titanium.UI.createScrollView({
top : '80dp',
// canCancelEvents: false,
disableBounce : true,
contentHeight : 'auto',
backgroundColor : '#00ff00',
});
//Skapa själva kalendern
var dayViewCalenderContent = Ti.UI.createView({
layout : 'vertical',
height : '1464dp'
});
//Lägger kalenderna i scrollView
dayViewScroll.add(dayViewCalenderContent);
//Lägger scrollView till fönstret
win.add(dayViewScroll);
//Skapa alla 24 timmarna
for (var i = 0; i < 24; i++) {
//Se till att alla timmarna
//är 2 sifriga.
if (time < 10) {
myTime = '0' + time + '.00';
} else {
myTime = time + '.00';
}
//Skapa linjerna till timm-raderna.
var hr = Ti.UI.createView({
width : '100%',
height : '1dp',
backgroundColor : '#bbb',
top : '0dp',
bottom : '0dp'
});
rows.push(hr);
//Skapa timm-raderna.
var myRow = Ti.UI.createView({
backgroundColor : 'white',
borderColor : '#bbb',
borderWidth : '0dp',
width : '100%',
height : '60dp',
top : '0dp',
left : '0dp'
});
//Skapa högra linjen av timmarna
var borderRight = Ti.UI.createView({
height : '100%',
width : '1dp',
backgroundColor : '#bbb',
top : '0dp',
left : '90dp',
bottom : '0dp'
});
myRow.add(borderRight);
myRow.index = i;
//Skapa halvtimmers linjerna
var timeLine = Ti.UI.createView({
width : '100%',
height : '1dp',
backgroundColor : '#bbb',
left : '91dp',
top : '30dp'
});
myRow.add(timeLine);
var timeRow = Ti.UI.createView({
backgroundColor : 'white',
borderColor : '#bbb',
borderWidth : '0dp',
width : '90dp',
height : '60dp',
top : '0dp',
left : '0dp'
});
myRow.add(timeRow);
//Skapa siffrona i timmarna.
var timeLabel = Ti.UI.createLabel({
left : '25dp',
top : '23dp',
text : myTime
});
//Lägg till siffrona till timm-kolumnen.
timeRow.add(timeLabel);
myRow.foo = myTime;
rows.push(myRow);
time++;
}
//Lägg till alla skapta timmarna till kalenderna
dayViewCalenderContent.add(rows);
function Createbooking(globalPoint, bookedfromHaur, bookedfromMinute, bookedToHaur, bookedToMinute) {
var globalPoint = globalPoint;
var bookedfromHaur = bookedfromHaur;
var bookedfromMinute = bookedfromMinute;
var bookedToHaur = bookedToHaur;
var bookedToMinute = bookedToMinute;
// this.top = globalPoint;
//Skapa bokningsobjektet.
var bookingView = Titanium.UI.createView({
backgroundColor : '#000',
width : '160dp',
height : '92dp',
bubbleParent : false,
top : globalPoint
});
// this.bookingView.top = globalPoint;
//Skapa vyn för timmarna i bokningsobjektet
var bookingTimeView = Titanium.UI.createView({
backgroundColor : '#000',
height : 32,
width : '60%',
bubbleParent : false,
top : 0
});
bookingView.add(bookingTimeView);
bookingView.myBookingStartTime = new Date();
bookingView.myBookingEndTime = new Date();
bookingView.myBookedFrom = bookingView.myBookingStartTime.set({
hour : bookedfromHaur,
minute : bookedfromMinute
}).toString('HH:mm');
bookingView.myBookedTo = bookingView.myBookingEndTime.set({
hour : bookedToHaur,
minute : bookedToMinute
}).toString('HH:mm');
// var myDay = (11:mm).addHours(6);
//Skapa boka-från tidssiffrona.
bookingView.myBookingFromTimeLabel = Ti.UI.createLabel({
color : '#FFFFFF',
left : '0dp',
top : '3dp',
text : bookingView.myBookedFrom
});
//Skapa mellanslag mellan bokade tiderna
myBookingSeparaterTimeLabel = Ti.UI.createLabel({
color : '#FFFFFF',
top : '3dp',
text : ' -- '
});
//Skapa boka-till tidssiffrona.
bookingView.myBookingToTimeLabel = Ti.UI.createLabel({
color : '#FFFFFF',
top : '3dp',
right : '0dp',
text : bookingView.myBookedTo
});
//Lägg till bokningstids siffrona till Vyn för boknings tiderna
bookingTimeView.add(bookingView.myBookingFromTimeLabel);
bookingTimeView.add(myBookingSeparaterTimeLabel);
bookingTimeView.add(bookingView.myBookingToTimeLabel);
//Skapa boknings objektets body
var bookingViewContent = Titanium.UI.createView({
backgroundColor : 'yellow',
width : '160dp',
top : '32dp',
bottom : '32dp'
});
//Lägg till body i bokningsobjektet.
bookingView.add(bookingViewContent);
//Skapa handtaget till bokningsobjektet.
var dragDownView = Ti.UI.createView({
width : '160dp',
height : '32dp',
bottom : '0dp',
backgroundColor : '#999',
zIndex : 20
});
//Lägg till handtaget till bokningsobjektet.
bookingView.add(dragDownView);
//Skapa bild-Vy till handtaget.
dragDownImageView = Ti.UI.createView({
width : '70dp',
height : '32dp',
left : '95dp',
bottom : '0dp',
backgroundImage : 'images/dragDownIco.png',
zIndex : 20
});
//Lägg till bilden till handtaget.
dragDownView.add(dragDownImageView);
//Skapa "lysnare" till 'touchstart' på kalenderna
dayViewScroll.addEventListener('touchstart', function(e) {
//stoppa scrollningen vid 'touchstart'.
dayViewScroll.setScrollingEnabled(false);
// alert(e);
});
//Skapa "lysnare" till 'touchmove' på kalenderna
dayViewScroll.addEventListener('touchmove', function(e) {
this.myFinalGlobal = e.source.index * 61 + e.y + 1;
var newBookingEndTime = new Date();
var newBookedEndTime = newBookingEndTime.set({
hour : 12,
minute : 0
}).addMinutes(6).toString('HH:mm');
// updateEndTime(newBookedEndTime);
bookingView.myBookingToTimeLabel.setText(newBookedEndTime);
bookedToHaur = 10;
// alert(globalPoint);
if (this.myFinalGlobal - bookingView.top) {
bookingView.animate({
height : this.myFinalGlobal - bookingView.top,
duration : 10
});
bookingView.setHeight(this.myFinalGlobal - bookingView.top);
}
});
dayViewScroll.addEventListener('touchend', function(e) {
bookingView.setHeight(globalPoint + e.y);
dayViewScroll.setScrollingEnabled(true);
alert(bookingView.getHeight);
});
bookingView.setHeight(this.myFinalGlobal - bookingView.top);
return bookingView;
}
Createbooking.prototype.myToushMove = function() {
alert(this.globalPoint);
};
//Skapa 'lysnare' till 'longpress'.
dayViewCalenderContent.addEventListener('longpress', function(e) {
var myGlobal = e.source.index * 61 + e.y + 1;
var bookedfromHaur = e.source.index + 1;
var bookedfromMinute = e.y;
var bookedToHaur = e.source.index + 1;
var bookedToMinute = e.y;
this.myBooking = new Createbooking(myGlobal, bookedfromHaur, bookedfromMinute, bookedToHaur, bookedToMinute);
// e.source._event_myStart = myBooking;
dayViewScroll.add(this.myBooking);
//dayViewScroll.addEventListener('touchmove', myMove);
function myMove(e) {
//alert('Hejsan');
var myBookedFinalTo = this.myBooking.myBookingEndTime.set({
hour : bookedToHaur,
minute : bookedToMinute
}).addMinutes(e.y).toString('HH:mm');
this.myBooking.myBookingToTimeLabel.setText(myBookedFinalTo);
var myFinalGlobal = e.source.index * 61 + e.y + 1;
if (myFinalGlobal > this.myBooking.top) {
this.myBooking.animate({
height : myFinalGlobal - this.myBooking.top,
duration : 10
});
this.myBooking.setHeight(myFinalGlobal - this.myBooking.top);
//alert(myFinalGlobal - myBooking.top);
}
}
});
win.open();

Answer 1

Don't use "this." on an event handler. That'll have undesirable consequences, like your code not working, and it has a performance hit too (due to crossing from JS to Native when writing, and back when reading). Instead, promote some variables out to the appropriate scope.
Right now, you're doing:
function bar() {
this.foo++;
}
Instead do:
var foo = 0;
function bar() {
foo++;
}