Swipe-Aktion Bindung in knockoutjs

Question

Ich verwende Knockout als Hauptrahmen in meiner Anwendung und es muss Tabletten und mobile Geräte unterstützen. Da das Framework auf bindenden Handlern aufgebaut ist, frage ich mich, wie kann die benutzerdefinierte Bindung an Aktionen (wie Swipe und andere gerätespezifische) erreicht werden, oder vielleicht wird so etwas getan?

Answer 1

Wahrscheinlich zu spät, aber hier ist eine Bibliothek, die Touch-Bindung an knockoutjs ergänzt: https://github.com/yaroslavya/knockouch

Answer 2

Es gibt keine integrierten Bindungen für bestimmte Frameworks, da knockout.js keine Abhängigkeiten zu anderen Frameworks aufweist. Es sollte eine triviale Aufgabe sein, Ihren jQuery-Selektor-Code in bindende Handler zu konvertieren, die den oben angegebenen Link @niko-Verweise verwenden.

Answer 3

Ich weiß nicht, ob es noch hilft, aber hier ist ein Zeiger.

1. Verwenden Sie eine Bibliothek wie Hammer.js, um Multi-Touch-Aktionen zu erhalten.
2. Schreiben Sie einen benutzerdefinierten Bindungshandler und rufen Sie die standardmäßige Ereignisbindung des Knockouts auf. so etwas für einen Schlag. (Der Autor der Geige verwendet tap.js)

http://jsfiddle.net/snaptopixel/spByj/

jetzt alles, was Sie in Ihrem HTML zu tun ist

<button data-bind="tap:doSomething">Click Me</button>​ 

wo doSomething eine Funktion ist.

Answer 4

1. ein bindingHandler erstellen. Hier ein Beispiel für ein reales Projekt:

   ko.bindingHandlers.swipeSections = { 
   init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
       var elem = $(element); 
       var params = valueAccessor().split('##'); 
   
       elem.unbind('swipe'); 
   
       elem.swipe({ 
        swipeLeft: function (event, direction, distance, duration, fingerCount) { 
         //process 
        }, 
        swipeRight: function (event, direction, distance, duration, fingerCount) { 
         //process 
        } 
       }); 
   } 
   

   };

2. eine Swipe-Bibliothek verwenden: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

   script type="text/javascript" src="scripts/jquery.touchSwipe.js" 
   

3. definieren die Position der Bindung

   div id="myid" class="section" data-bind="swipeSections: 'leftPanel##rightPanel'"