Как использовать перетаскивание HTML5 в сочетании с KnockoutJS?

Я не могу привязываться к событиям перетаскивания html5.

Вот пример из шаблона:

<script id="tabsTemplate" type="text/html">
    <div class="dropzone" for="tab"
        data-bind="event:{dragover: function(event){event.preventDefault();},
                          dragenter: function(event){event.target.addClass('dragover'); event.preventDefault();},
                          dragleave: function(event){event.target.removeClass('dragover'); event.preventDefault();}}
                          drop: function(event){console.log('blahblah!')}"></div>
    <h1 class="tab" draggable="true"
      data-bind="attr: {selected: $data.name === $item.selected()},
                 click: function(){$item.selected($data.name)},
                 event:{ dragstart: function(event){console.log('blah!!')},
                         dragend: function(event){document.getElementsByClassName('dragover')[0].removeClass('dragover')}}">
        ${name}

        <img src="icons/close-black.png" class="close button" role="button"
            data-bind="click: function(e){$item.close($data)}">
    </h1>
</script>

То, что я должен работать, как ожидалось... и это делает, пока я делаю их обычными встроенными. Однако другие привязки не работают!

Я получаю это сообщение об ошибке:

Неподготовленный SyntaxError: Неожиданный токен '||' JQuery-tmpl.js: 10

Что здесь происходит? Есть ли что-то, что я делаю неправильно?

Ответ 1

Хорошо, я это проработал. Кажется, я пропустил в документации, где он сказал, что в нокауте по умолчанию все события предотвращают по умолчанию/возвращает false. Так что все, что мне нужно было сделать, это заставить обработчик dragstart вернуть true, и теперь это работает. Уф!!

Ответ 2

У вас может быть такая же проблема, как упоминалось здесь, хотя она относится к вложенным шаблонам:

Предупреждение

Если вы передаете templateOptions привязки шаблона из вложенного шаблона (так, указав привязку шаблона из шаблона), обратите особое внимание на ваш синтаксис. У вас возникнет проблема, если привязка выглядит следующим образом:

 <div data-bind="template: { name: 'items', data: newItems, templateOptions: { header: "New Items!"}}"></div>

Плагин jQuery Templates запутывается}} в конце вашей привязки, поскольку это часть его синтаксиса. Добавление пробела между фигурными скобками будет работать нормально. Надеюсь, это мешает кому-то немного лишнего разочарования.

 <div data-bind="template: { name: 'items', data: newItems, templateOptions: { header: "New Items!"} }"></div>

Ответ 3

Для тех (как я), которым нужна работа SSCCE; решение следует за предложением [cybermotron], а также устраняет проблему, когда обработчики ожидают данные и события проремонтирования.

http://jsfiddle.net/marrok/m63aJ/

HTML

<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<ul id="people" data-bind='template: { name: "personTmpl", foreach: people }'>
</ul>
<div class="trash" data-bind ="visible:dragging, event:{
       dragover: function(data, event){
          event.preventDefault();
       },
       drop: function(data, event){
          console.log('trash', $root.drag_start_index())
          $root.trash($root.drag_start_index())     
          event.preventDefault();
       }
}"> <span>DELETE</span> </div> 

<script id="personTmpl" type="text/html">
    <li class="draggable" draggable="true" data-bind="event:{
      dragstart:   function(data, event){ 
                    $(event.target).addClass('dragSource')
                    $root.drag_start_index($index());
                    return $(event.target).hasClass('draggable');},    

       dragend:   function(data, event){  
                   $root.drag_start_index(-1);
                   $(event.target).removeClass('dragSource')
                   return true;
       },    
       dragover:  function(data, event){event.preventDefault();},
       dragenter: function(data, event){
                $root.drag_target_index($index());
                var element = $(event.target)
                if(element.hasClass('draggable'))
                     element.toggleClass('dragover'); 
                event.preventDefault();
    },
       dragleave: function(data, event, $index){
                var element = $(event.target)
                if(element.hasClass('draggable'))
                     element.toggleClass('dragover');
                event.preventDefault();
    },
       drop: function(data, event){
                $(event.target).removeClass('dragover'); 
                console.log('swap', $root.drag_start_index(),  $root.drag_target_index() )
                $root.swap($root.drag_start_index(),  $root.drag_target_index())
               }
             }">

        <span data-bind='text: name'></span>
    </li>
</script>

Нокаут

var Person = function(name) {
    this.name = ko.observable(name);

};

var PeopleModel = function() {
    var self = this;

    self.drag_start_index = ko.observable();
    self.drag_target_index = ko.observable();
    self.dragging = ko.computed(function() {
        return self.drag_start_index() >= 0;
    });
    self.people = ko.observableArray([
        new Person("Oleh"), new Person("Nick C."), new Person("Don"), new Person("Ted"), new Person("Ben"), new Person("Joe"), new Person("Ali"), new Person("Ken"), new Person("Doug"), new Person("Ann"), new Person("Eve"), new Person("Hal")]);


    self.trash = function(index) {
        self.people.splice(index, 1)
    }
    self.swap = function(from, to) {
        if (to > self.people().length - 1 || to < 0) return;

        var fromObj = self.people()[from];
        var toObj = self.people()[to];
        self.people()[to] = fromObj;
        self.people()[from] = toObj;
        self.people.valueHasMutated()
    }
};
ko.applyBindings(new PeopleModel());