Hi All
I've got a gesture event set up to resize a circle, so if you pinch in/out the circle gets smaller/bigger. So the circle represents an amount which is also displayed and as it gets resized I'd like that amount to update so that size of
the circle correlates with amount displayed. So the problem comes in when I try and send an update to the List which the amount figure is binding to. Specifically when I'm using touch events it seems that if you update an List which is being bound
to then the gesture event stops. So when I use ctrl-mouse to resize the circle it works well but when I use a pinch gesture it only updates it once.
Does anyone know why this happens or how I can work around it?
here's my code:
function gestureHandler(eventObject) {
var target;
target = getManipulationElement(eventObject.target, true);
target.scale *= eventObject.scale;
var element = eventObject.target.parentNode.parentNode;
var indexNumber = listView.indexOfElement(element);
var currentAmount = ViewData.getAmountForSplitByIndex(indexNumber);
ViewData.amountChanged(currentAmount *= eventObject.scale, indexNumber); // this line seems to cause the problem, when it's remove everything works as expected
}
target.style.transform = "scale(" + target.scale + ")";
console.log('eventObject.scale ' + eventObject.scale);
}
}
here's the function that updates the list
var amountChanged = function (newAmount, indexNumber) {
var item = currentTrxn.getAt(indexNumber);
var updatedItem = _({}).extend(item);
updatedItem.root.amount.amount = newAmount;
currentTrxn.setAt(indexNumber, updatedItem);
}
and here's my template:
<div id="listViewElementTemplate">
<div id="circleContainer">
<div id="cirlceBacking"></div>
<div id="amountCircle" class="CircleManipulationElement" data-win-bind="style.backgroundColor: root.transactionClass.description transactionCard.getSpendingGroupColor; style.width: root.amount.amount transactionCard.setCircleSize; style.height: root.amount.amount transactionCard.setCircleSize" data-max-radius="2"></div>
</div>
<div id="controlsContainer">
<div id="amountTitle" class="title margins">Amount</div>
<input id="amountTextInput" onchange="transactionCard.onAmountInputChange(event)" type="number" data-win-bind="value: root.amount.amount transactionCard.processAmount" class="margins values">
<div id="spendingGroupTitle" class="title margins">Spending group</div>
<select id="spendingGroudSelect" onchange="transactionCard.onSpendgGroupChange(event)" data-win-bind="innerHTML: root transactionCard.setSpendingGroupsAndSelect" class="margins values">
</select>
<div id="categoryTitle" class="title margins">Category</div>
<select id="categorySelect" onchange="transactionCard.onCategoryChange(event)" class="margins values" data-win-bind="innerHTML: root transactionCard.setCategoryAndSelect">
</select>
</div>
</div>
