plumage.js, 电池包括用于数据密集型用户界面的应用框架

分享于 

4分钟阅读

GitHub

  繁體 雙語
Batteries Included App Framework for Data Intensive UIs
  • 源代码名称:plumage.js
  • 源代码网址:http://www.github.com/twitter/plumage.js
  • plumage.js源代码文档
  • plumage.js源代码下载
  • Git URL:
    git://www.github.com/twitter/plumage.js.git
    Git Clone代码到本地:
    git clone http://www.github.com/twitter/plumage.js
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/twitter/plumage.js
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    Plumage.js Build StatusCoverage Status

    面向复杂用户界面的JS用户界面框架。

    安装

    当前需要从本地 repo 安装 Bower

    
    git clone https://github.com/twitter/plumage.js.git
    
    
    
    cd [my-js-project]
    
    
    bower install plumagejs=../plumage.js
    
    
    
    

    也许有一天,可能是 bower install plumagejs,但还没有。

    启动

    将 require.js, config.js (。require.js的配置)的脚本标记添加到你的index.html 中

    
    <script type="text/javascript" src="/bower_components/plumagejs/assets/scripts/vendor/require.js"></script>
    
    
    <script type="text/javascript" src="/bower_components/plumagejs/assets/scripts/config.js"></script>
    
    
    <!-- include your own require.js config here -->
    
    
    
    

    你的js文件,需要羽毛,并访问羽毛类从羽毛对象。

    
    define(['jquery', 'underscore', 'plumage'],
    
    
    function($, _, Plumage) {
    
    
     return Plumage.model.Model.extend({
    
    
     urlRoot: '/mymodel'
    
    
     });
    
    
    });
    
    
    
    

    hello羽毛

    我们需要一个应用程序,一个路由器插件和一个控制器( )。

    控制器/mycontroller。js

    
    define(['jquery', 'underscore', 'plumage'],
    
    
    function($, _, Plumage, ) {
    
    
     return Plumage.controller.BaseController.extend({
    
    
     sayHello: function() {
    
    
     alert('Hello Plumage!');
    
    
     }
    
    
     });
    
    
    });
    
    
    
    

    MyRouter.js

    
    define(['jquery', 'underscore', 'plumage'],
    
    
    function($, _, Plumage, ) {
    
    
     return Plumage.Router.extend({
    
    
     controllerRoutes: {
    
    
     '': {controller: 'MyController', method: 'sayHello'},
    
    
     }
    
    
     });
    
    
    });
    
    
    
    

    application.js

    
    define(['jquery', 'underscore', 'plumage', 'MyRouter', 'controller/MyController'],
    
    
    function($, _, Plumage, MyRouter) {
    
    
     myApp = new Plumage.App({
    
    
     initCSRFToken: true,
    
    
     controllers: [
    
    
     'MyController'
    
    
     ]
    
    
     });
    
    
     window.router = new MyRouter({app: myApp});
    
    
     return myApp;
    
    
    });
    
    
    
    

    然后在 index.html 中要求你的应用程序,并且你可以。

    
    <script type="text/javascript">require(['application']);</script>
    
    
    
    

    加载页面,你应该会看到'hello羽毛'警告。

    下一步

    接下来,你可能需要一些模型视图。 开始的一个好地方是国家的示例的源代码。

    许可证

    版权所有 2014 Twitter。 和其他贡献者

    许可许可许可


    数据  INT    framework  bat  Include  
    相关文章