2

我正在使用 Knockout.js 和 CSS3 动画为 iPad 构建“WebApp”。

不同页面之间的过渡是动画的。我想在动画结束时获得一个 JavaScript 回调。

现在我知道你可以像这样使用 Javascript 来捕获回调：

element.addEventListener(webkitAnimationEnd, function(){callfunction()},false);

但是没有更好的方法来做到这一点吗？“淘汰方式”？我想使用data-bindDOM 中的属性绑定回调函数，而不是在我的 javascript 代码中访问 DOM 元素！

有任何想法吗？

编辑：也许我应该补充一点，我是 Knockout.js 的新手，我不知道我想做什么，或者更确切地说，我想如何去做是有意义的，或者你是否只是按照传统方式去做方式！

4

2 回答 2

4

我使用jQuery Transit和一个淘汰赛自定义绑定来完成滑动页面转换。基本上，它会将活动页面 (div) 滑出并滑入一个新页面。它在移动设备（iPad、iPhone、iPod Touch、Android 手机等）上看起来也不错。这是绑定：

Javascript：

    var previousElement = null;
    ko.bindingHandlers.slideVisible = {
        init: function (element, valueAccessor)
        {
            var value = valueAccessor();
            $(element).toggle(ko.utils.unwrapObservable(value));
        },
        update: function (element, valueAccessor)
        {

            var value = ko.utils.unwrapObservable(valueAccessor());
            if (value)
            {
                if (previousElement == null)
                { // initial fade
                    $(element).show();
                }
                else
                {
                    //uses CSS3 Transform for smooth mobile performance
                    $(previousElement).transition({ x: '-100%' }, function () { $(this).hide(); });
                    $(element).css({ x: '100%' });
                    $(element).show().transition({ x: '0%' }, function () 
{ 
//Callback | transition finished code here
});
                }
                previousElement = element;
            }
        }
    };

查看模型片段：

isPageVisible: ko.observable(false)

HTML：

<div data-bind="slideVisible: isPageVisible">
<!-- Page Content Here -->
</div>

JS 小提琴演示

于 2013-03-21T17:36:31.910 回答
2

根据我的经验，没有“淘汰方式”来处理这类事件。

Knockout 的作者建议使用 KO事件绑定进行简单绑定。但对于更复杂和/或不显眼的事件绑定场景，建议使用 jQuery： http: //knockoutjs.com/documentation/unobtrusive-event-handling.html

我现在正在使用 Knockout 进行一个项目，我遵循了他的建议。使用一些 KO事件绑定（用于表单提交）和一些 jQuery 事件绑定（在我的情况下用于窗口调整大小事件）。

当然，您不需要使用 jQuery，但在您的情况下，走出 KO 库可能是正确的路线。玩得开心！

于 2012-04-23T11:55:07.643 回答