我的 Web 应用程序中有 3 个简单的动画,我不需要访问服务器,也不需要保存页面状态。
它们是一个简单的下拉菜单、一个翻页器和一个 Pane 翻转器,基本上是一个包含在页面中的小页面。
我可以在 Backbone 中对这些进行建模吗?相反,我应该在主干中对它们进行建模吗?
这是我的翻页器的示例:
/***************************************************************************************************
*/
var Page = $A.Class.create('public', {
Name: 'Page',
// (P)roperties
P: {
page_previous: null,
head_previous: null
},
// (Css) Classes
C: {
visible: 'inline',
invisible: 'none'
},
// (E)lements
E: {
// body types
body_splash: '#body_splash',
body_main: '#body_main',
body_settings: '#body_settings',
// heading types
heading_splash: '#heading_splash',
heading_main: '#heading_main'
},
// main, splash, settings
flip : function (input) {
var page_current,
head_current;
if (!input) {
input = 'splash';
}
if (input === 'main') {
$A.Event.trigger('main_flipped');
}
// set page and header based on input - update this later
page_current = this.E['body_' + input];
if (input === 'settings') {
head_current = this.E.heading_main;
} else {
head_current = this.E['heading_' + input];
}
$A(page_current).fade();
head_current.style.display = 'inline';
// Turn off previous page / header
if (this.P.page_previous !== null && this.P.page_previous !== page_current) {
this.P.page_previous.style.display = 'none';
}
if (this.P.head_previous !== null && this.P.head_previous !== head_current) {
this.P.head_previous.style.display = 'none';
}
// Update previous page / header
this.P.page_previous = page_current;
this.P.head_previous = head_current;
}
});
最佳答案
你可以通过使用backbone来完成这些事情。 marionette 。在此github repo您可以找到一些下拉菜单和翻页器的示例。
关于javascript - 如何使用Backbone来做简单的动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24481208/