Question

我的HTPC项目（开源）广泛使用Hammer 1.0.5 - 许多页面中有32个单独的锤子实例; 184个不同的事件处理程序;处理许多不同的事件类型（点击，双击，触摸，释放，保持，拖动，拖动，下拉，滑动，swiperight，swipeup，swipeown）。所有事件处理程序都使用委托。

当我发现iPad上的Safari出现故障时（忽略了其他任何触摸），我来找同样问题的人发现我错过了第2版的发布。所以...

升级是否明智？
我可以使用版本1在版本2中执行所有内容吗？
升级是否相当机械？（设置选项以启用功能，为事件使用新名称）？

我无法找到任何有关锤子文档升级的指导，这是一种耻辱。

由于

布赖恩

Answer 1

嗯，简单的答案是“不，我不能轻易将我的Hammer 1.x实现移植到2.0 ”。

下面是我的一个HTPC JS文件的片段，它为包含EPG电视节目列表的<div>添加了操作。这适用于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
            }
        })
    });

}

有几点需要注意。

我只对整个<div>使用一个Hammer，并且委托给每个单独的guideEpgProgramme子元素，这样当我触摸列出的程序时，处理程序就会对一个子元素。
这允许我通过Ajax动态替换<div>的内容（例如，用于其他频道），而无需重新注册处理程序。
根据需要动态添加和删除“录制”和“取消”按钮图像，并自动获得所需的预先注册的操作。
Hammer对象被传递给公共效用函数EnableDragScroll，该函数添加处理程序以在固定大小guideBrowserItems页面区域内滚动（长，可变长度）内容。
ReplacePane("guideBrowserItems", <NEW URL>)有很多实例动态改变<div>的内容而不影响页面的其余部分或脚本。
这只是30多个不同的Hammer实例中的一个，具有相应的处理能力。

在Hammer 2.0中，这种工作方式似乎都不可能。

所以现在我会坚持使用旧机制。

Hammer 2.0是否允许我在1.0.5中做的所有事情？

1 个答案: