zoukankan      html  css  js  c++  java
  • 探索Emberjs——了解Emberjs

     

    简单介绍

    Emberjs——一个用于创建 web 应用的 JavaScript MVC 框架,采用基于字符串的Handlebars模板,支持双向绑定、观察者模式、计算属性(依赖其他属性动态变化)、自动更新模板、路由控制、状态机等。

    Ember使用自身扩展的类来创建Ember对象、数组、字符串、函数,提供大量方法与属性用于操作。

    每一个Ember应用都使用各自的命名空间,避免冲突。

    Ember采用可嵌套的视图层,使视图变得有层次。

    构建应用

    开始一个应用,需要先使用Ember.Application.create()来创建一个实例。

    然后分别定义模型(Model)、视图(View)、控制(Controller)层。

    使用extend()方法创建子类,如用Ember.Object.extend()创建一种模型类,用Ember.View.extend()创建视图类,用Ember.Controller.extend()创建控制类。通过create()方法生成实例。

    你还需要在HTML页面里使用Handlebars加入模板,以完成视图的显示。

    当你与页面进行交互时,视图接收到你的操作,通过控制器将事件传递给模型,模型对数据进行修改,视图监控到模型数据的修改,相应的更新页面。

    完成最简单的一个应用,总会包含下面的代码:

    /*创建命名空间*/
    App = Ember.Application.create();
    
    /*创建应用视图类并指定模板名称,该类会创建一个实例并插入应用的视图层级中作为根视图*/
    App.ApplicationView = Ember.View.extend({
      templateName: 'application'
    });
    
    /*创建应用控制器类,为视图提供上下文,模板里的内容将由该控制器提供*/
    App.ApplicationController = Ember.Controller.extend();
    
    /*创建路由控制,用于在应用的各种状态中前进或后退,也可以通过序列化的URL直接进入到某个状态*/
    App.Router = Ember.Router.extend({
      root: Ember.Route.extend({
        index: Ember.Route.extend({
          route: '/'
        })
      })
    });
    
    
    /*初始化应用,启动路由进程,创建视图实例并插入到页面*/
    App.initialize();
    
    /*在HTML页面加入模板*/
    <script type="text/x-handlebars" data-template-name="application">
    
    </script>

    在Ember中默认使用 “application” 作为模板名称,以及作为视图与控制器的前缀。如果用于创建类时,首字母必须大写。

    如果未定义ApplicationView或ApplicationController,Ember将会抛出异常提示。

    我在这里写了一个简单的示例应用,你现在就可以开始动手跟着做了:探索Emberjs——第一个应用

    相关资料

    12种JavaScript MVC框架之比较:http://news.cnblogs.com/n/144303/

    JavaScript宝座:七大框架论剑:http://news.cnblogs.com/n/153121/

    点燃圣火!Ember.js 的初学者指南:http://www.adobe.com/cn/devnet/html5/articles/flame-on-a-beginners-guide-to-emberjs.html

    Ember.js的视图层:http://emberjs.torriacg.org/guides/view_layer/

    Ember.js官方文档(中英对照):http://ued.github.com/emberjs-doc-cn/

    Ember.js API:http://emberjs.com/api/

    托管在GitHub上的Ember.js:https://github.com/emberjs

    最新的Ember.js文件:https://github.com/emberjs/ember.js/downloads

    汇聚关于Ember.js各方面资料的dashboard:http://code418.com/ember.js-dashboard/

    使用Ember.js创建的三个示例应用:http://emberjs.com/examples/

    使用10+个框架创建Todo应用:http://addyosmani.github.com/todomvc/

    我的Ember.js小组:http://home.cnblogs.com/group/102912/

    转:http://www.cnblogs.com/linerz/archive/2012/10/27/emberjs-about.html

  • 相关阅读:
    初谈面向对象
    java概述~至数组
    django一对多数据库模型
    Django url()函数详解
    python编码规范
    django的用户管理
    ubuntu下安装搜狗拼音
    乱七八糟的2013
    使用django进行微信公众平台开发
    我们要写的项目
  • 原文地址:https://www.cnblogs.com/ahwwmb/p/2955600.html
Copyright © 2011-2022 走看看