Hammer 2.0 позволяет мне делать все, что я делаю в 1.0.5?

Question

В моем проекте HTPC (с открытым исходным кодом) широко используется Hammer 1.0.5 - 32 отдельных экземпляра молотка на многих страницах; 184 различных обработчика событий; обрабатывает множество различных типов событий (кратковременное нажатие, двойное касание, касание, разблокировка, удержание, перетаскивание, перетаскивание, перетаскивание, swipeleft, swiperight, swipeup, swipedown). Все обработчики событий используют делегирование.

Когда я обнаружил, что у меня был глюк на Safari на iPad (все остальные касаются игнорируются), я пришел искать кого-то с той же проблемой и обнаружил, что я пропустил выпуск версии 2. Итак ...

• Уместно ли модернизировать?
• Могу ли я сделать все в версии 2, что я мог с версией 1?
• Является ли обновление довольно механическим? (Устанавливать параметры для включения возможностей, использовать новые имена для событий)?

Я не могу найти никаких рекомендаций по обновлению документации для молотка, что является позором.

Благодаря

Brian

Answer 1

Ну простой ответ, что «Нет, я не могу легко порт моя реализация Молоток 1.x до 2,0».

Ниже приведен фрагмент одного из моих файлов JSP HTPC, который добавляет действия к <div>, содержащим список телевизионных программ EPG. Это очень хорошо работает с 1.x.

var listingsHammer = null; 

function AddListingsHammerActions() { 
    $("#guideBrowserItems").each(function() { 
     var h = $(window).height() - 24 
     var t = $(this).offset().top 
     console.log("#guideBrowserItems h=" + h + "; t=" + t + " => " + (h - t)) 
     $(this).height(h - t) 
    }); 

    if (!listingsHammer) { 
     listingsHammer = $(".guideBrowserItems").hammer({ prevent_default: true }); 
    } 

    EnableDragScroll(listingsHammer) 

    listingsHammer.on("tap", ".guideEpgProgramme", function (e) { 
     var programItem = this; 
     $(".guideEpgProgrammeDescription").remove(); 
     $(".guideEpgProgrammeCancel").remove(); 
     $(".guideEpgProgrammeRecord").remove(); 
     $(".guideEpgProgrammeRecordSeries").remove(); 

     $.ajax({ 
      url: "/Guide/Description?id=" + programItem.id, 
      success: function (description) { 
       if (hasClass(programItem, "guideEpgProgrammeScheduled")) { 
        $(programItem).prepend('<img class="guideEpgProgrammeCancel" id="' + programItem.id + '" src="/Content/Buttons/SmallRound/Exit.png" />') 
       } else { 
        $(programItem).prepend('<img class="guideEpgProgrammeRecordSeries" id="' + programItem.id + '" src="/Content/Buttons/SmallRound/Transport.Rec.Series.png" />') 
        $(programItem).prepend('<img class="guideEpgProgrammeRecord" id="' + programItem.id + '" src="/Content/Buttons/SmallRound/Transport.Rec.png" />') 
       } 
       $(programItem).append('<div class="guideProgrammeInfo guideEpgProgrammeDescription">' + description + '</div>') 
       cache: false 
      } 
     }) 
    }); 

    listingsHammer.on("tap", ".guideEpgProgrammeRecord", function (e) { 
     var programItem = this; 

     $.ajax({ 
      url: "/Guide/Record?id=" + programItem.id, 
      success: function (error) { 
       if (error == "") { 
        $(".guideSelectorItems").html("") 
        ReplacePane("guideBrowserItems", "/Guide/ListingsPane?mode=GuideSchedule", "none") 
       } 
       else { 
        alert(error) 
       } 
       cache: false 
      } 
     }) 
    }); 

    listingsHammer.on("tap", ".guideEpgProgrammeRecordSeries", function (e) { 
     var programItem = this; 

     $.ajax({ 
      url: "/Guide/RecordSeries?id=" + programItem.id, 
      success: function (error) { 
       if (error == "") { 
        $(".guideSelectorItems").html("") 
        ReplacePane("guideBrowserItems", "/Guide/ListingsPane?mode=GuideSchedule", "none") 
       } 
       else { 
        alert(error) 
       } 
       cache: false 
      } 
     }) 
    }); 

    listingsHammer.on("tap", ".guideEpgProgrammeCancel", function (e) { 
     var programItem = this; 

     $.ajax({ 
      url: "/Guide/Cancel?id=" + programItem.id, 
      success: function (error) { 
       if (error == "") { 
        $(".guideSelectorItems").html("") 
        ReplacePane("guideBrowserItems", "/Guide/ListingsPane?mode=GuideSchedule", "none") 
       } 
       else { 
        alert(error) 
       } 
       cache: false 
      } 
     }) 
    }); 

    listingsHammer.on("tap", ".guideEpgSeriesCancel", function (e) { 
     var seriesItem = this; 

     $.ajax({ 
      url: "/Guide/CancelSeries?id=" + seriesItem.id, 
      success: function() { 
       $(".guideSelectorItems").html("") 
       ReplacePane("guideBrowserItems", "/Guide/ListingsPane?mode=GuideSeries", "none") 
       cache: false 
      } 
     }) 
    }); 

} 

Есть несколько вещей, которые следует учитывать.

1. Я использую только один молот для всего <div> с делегацией каждый из отдельных guideEpgProgramme подэлементам, так что, когда я прикасаюсь к перечисленным программам, обработчик действует на этом одном подэлементе.

2. Это позволяет мне динамически заменять содержимое <div> через Ajax (например, для другого канала), без необходимости перерегистрации обработчиков.

3. Изображения кнопки «Запись» и «Отмена» динамически добавляются и удаляются по мере необходимости и автоматически получают желаемые предварительно зарегистрированные действия.

4. Объект Hammer передается на общую функцию полезности EnableDragScroll, которая добавляет обработчики для прокрутки (длинной, переменной длины) содержимого в пределах фиксированной площади страницы guideBrowserItems.

5. Существует множество примеров ReplacePane("guideBrowserItems", <NEW URL>), чтобы динамически изменять содержимое <div>, не затрагивая остальную часть страницы или скрипт.

6. И это только один из 30+ разных экземпляров Hammer с соответствующей обработкой.

Ни один из этих способов работы не представляется возможным в Hammer 2.0.

Так что теперь я буду придерживаться старых механизмов.