blocks|key|1141777|text|根据我的经验，没有“淘汰赛”的方法来处理这类事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1141778|淘汰赛的作者建议对简单绑定使用KO+事件绑定。但是对于更复杂和/或不引人注目的事件绑定场景，建议使用jQuery：http://knockoutjs.com/documentation/unobtrusive-event-handling.html|offset|length|style|BOLD|1141779|我正在用Knockout做一个项目，我听从了他的建议。使用一些KO+事件绑定(用于表单提交)和一些jQuery事件绑定(在我的示例中用于窗口调整大小事件)。|1141780|当然，您不需要使用jQuery，但是在您的情况下，走出KO库可能是正确的路线。玩得开心!|1141781|entityMap|0|LINK|mutability|MUTABLE|url|http://knockoutjs.com/documentation/unobtrusive-event-handling.html^0|0|I|2|1L|1V|0|0|Y|2|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|H|3|I|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

From my experience there is no 'knockout way' to handle those sorts of events. 

Knockout's author suggests using the KO event binding for simple bindings. But for more complex and/or unobtrusive event binding scenarios suggests using jQuery: <a href="http://knockoutjs.com/documentation/unobtrusive-event-handling.html" rel="nofollow">http://knockoutjs.com/documentation/unobtrusive-event-handling.html</a>

I'm working on a project now using Knockout and I followed his suggestion. Using some KO event bindings (for form submits) and some jQuery event bindings (for a window resize event in my case).

Of course, you don't need to use jQuery, but going outside the KO library in your case is probably the correct route. Have fun!

blocks|key|662342|text|我使用jQuery过境和一个敲除自定义绑定来完成滑动页面转换。基本上，它会将活动页面(div)幻灯片出来，并将一个新页面滑动到其中。它在移动设备上看起来也不错(iPad，iPhone，iPod+Touch，安卓手机等等)。以下是绑定：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|662343|Javascript:|style|BOLD|662344|++++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%25'+},+function+()+{+$(this).hide();+});
++++++++++++++++++++$(element).css({+x:+'100%25'+});
++++++++++++++++++++$(element).show().transition({+x:+'0%25'+},+function+()+
{+
//Callback+%7C+transition+finished+code+here
});
++++++++++++++++}
++++++++++++++++previousElement+=+element;
++++++++++++}
++++++++}
++++};|code-block|syntax|javascript|662345|视图模型片段：|662346|isPageVisible:+ko.observable(false)|662347|HTML:|662348|<div+data-bind="slideVisible:+isPageVisible">

</div>|662349|JS+Fiddle演示|662350|entityMap|0|LINK|mutability|MUTABLE|url|http://ricostacruz.com/jquery.transit/|1|http://jsfiddle.net/TWxy7/^0|3|8|0|0|0|B|0|0|0|7|0|0|0|5|0|0|0|B|1|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|D|3|E|5|6|7|1A|8|@$A|1B|B|1C|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|1D|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1E|8|@$A|1F|B|1G|F|G]]|9|@]|C|$]]|$1|O|3|P|5|J|7|1H|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1I|8|@$A|1J|B|1K|F|G]]|9|@]|C|$]]|$1|S|3|T|5|J|7|1L|8|@]|9|@]|C|$K|L]]|$1|U|3|V|5|6|7|1M|8|@]|9|@$A|1N|B|1O|1|1P]]|C|$]]|$1|W|3|-4|5|6|7|1Q|8|@]|9|@]|C|$]]]|X|$Y|$5|Z|10|11|C|$12|13]]|14|$5|Z|10|11|C|$12|15]]]]

I use <a href="http://ricostacruz.com/jquery.transit/" rel="nofollow">jQuery Transit</a> and a knockout custom binding to accomplish a sliding page transition. Basically, it slides the active page (div) out and slides a new one in. It looks good on mobile devices too (iPad, iPhone, iPod Touch, Android phones, etc.). Here is the binding:

Javascript:

<pre><code> 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;
 }
 }
 };
</code></pre>

View Model Snippet:

<pre><code>isPageVisible: ko.observable(false)
</code></pre>

HTML:

<pre><code>&lt;div data-bind="slideVisible: isPageVisible"&gt;
&lt;!-- Page Content Here --&gt;
&lt;/div&gt;
</code></pre>

<a href="http://jsfiddle.net/TWxy7/" rel="nofollow">JS Fiddle Demo</a>

I'm building a "WebApp" for iPad using Knockout.js and CSS3 Animations. 

The transition between different pages is animated. I want to get a JavaScript callback when the Animation ends.

Now i know you can catch the callback using Javascript like this:

<pre><code>element.addEventListener(webkitAnimationEnd, function(){callfunction()},false);
</code></pre>

But isn't there a better way to do this? The "knockout way"? I want to bind the callback function using the <code>data-bind</code> attribute in the DOM rather than accessing the DOM element in my javascript code!

Any ideas?

EDIT: Maybe i should add that i'm new to Knockout.js and i don't know if what i'm trying to do or rather, how i'm trying to do it makes sense or if you just do it the conventional way!

Bind CSS3 Animation Callback using Knockout.js

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用WebApp和CSS3动画为iPad构建一个“Knockout.js”。不同页面之间的转换是动画化的。当动画结束时，我想得到一个JavaScript回调。现在，我知道您可以使用这样的Javascript来捕获回调：element.addEventListener(webkitAnimationEnd, fun...

问使用CSS3绑定Knockout.js动画回调
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS3绑定Knockout.js动画回调EN