locked
updating binding interferes with gesture events RRS feed

  • Question



  • 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>


    • Edited by Syllogism Monday, January 21, 2013 1:39 PM
    Monday, January 21, 2013 1:37 PM

All replies

  • Hi,

    Could you post more details? Or share a simple project in skydrive. So I can reproduce the scenario on my side.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, January 22, 2013 8:17 AM
  • ok please hold on while I put one together
    Tuesday, January 22, 2013 8:31 AM
  • ok I've created a sample app... how do I use skydrive to share with you? when I goto my skydrive and click on settings > sharing it gives me the options of using people(facebook & twitter) or mail... Do I need your email address? Can you PM it to me?
    Tuesday, January 22, 2013 12:42 PM
  • ok well until we figure out the skydrive route I've made the sample application available here: http://rapidshare.com/files/3355672330/sample%20app.zip

    So to experience the problem do the following, run the application, resize any of the circles using a pinch gesture, you'll see that it works fine. Then go to transactionCard.js and uncomment the lines 200 - 203

              //var element = eventObject.target.parentNode.parentNode;
              //var indexNumber = listView.indexOfElement(element);
              //var currentAmount = ViewData.getAmountForSplitByIndex(indexNumber);
              //ViewData.amountChanged(currentAmount *= eventObject.scale, indexNumber);

    which are the lines that update the List object with the new values derived from the circle resizing, you'll see that the pinch gesture now no longers works properly, instead of continuously updating the size of the circle as it did before it now gets interrupted. This could possibly be because the size of the circle is bound to the amount value which is being updated. Any idea how I could make this work?



    Tuesday, January 22, 2013 1:06 PM
  • Hi Song

    Did you manage to download my sample app?

    Wednesday, January 23, 2013 1:51 PM
  • Hi,

    I can't open http://rapidshare.com/files/3355672330/sample%20app.zip .

    Please check. Thank you.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, January 24, 2013 2:17 AM
  • Hi song, can you send me your email? Then I'll send a sky drive or Dropbox invitation.

    you can send me an email on wschreuders (at) google mail (dot) com

    • Edited by Syllogism Thursday, January 24, 2013 4:50 AM
    Thursday, January 24, 2013 4:47 AM
  • Hi,

    My email: support-sotian@live.com


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, January 24, 2013 4:56 AM
  • Hi Song,

    Have you had a chance to look at my sample application? I've been working on it and I thought that perhaps the problem was that I was updating the size of the circle directly which is bound to a value, so now instead of updating the element I directly manipulate the data on gesture event. The problem however remains the same. I've also sent you a new version of the sample application which illustrates this.

    Thanks

    Wouter

    Monday, January 28, 2013 11:26 AM
  • Hi Song

    ok so I've been playing around some more with the gestures and isolated the problem a little more. So what I noticed is that normally the gesture call gets runs many times per second. When it executes my code it only runs the code once. I've narrowed down the line that seems to be cause the problem and that is the code which updates the list which the circle has a binding to:

    dataList.setAt(index, nextUpdatedItem);

    if This line is commented out them the call once again gets called multiple times person second. So the problems seems to be linked to the binding list being updated. I'm guessing the binding update somehow cancels out or interferes with the gesture coming through.

    Monday, January 28, 2013 12:50 PM
  • Hi,

    I still research that. Any update will let you know.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, January 30, 2013 8:20 AM
  • Hi Song

    Any Progress with this?

    Wednesday, February 6, 2013 2:46 PM