Er Get Started

安装edp

首先需要安装edp，命令是npm install -g edp，命令执行完毕之后，通过运行edp --version检查是否安装成功。

安装edp的riaproject扩展

git clone https://github.com/ecomfe/edpx-ria.git
cd edpx-ria
npm install .
edp help riaproject

初始化项目

mkdir my-project
edp riaproject init
edp riaproject genpage /hello/world

此时目录中应该有一些默认初始化好的代码，例如：

dep/ edp-webserver-config.js module.conf edp-build-config.js index.html src/

通过命令edp ws start启动web server，访问http://localhost:8848/#/hello/world，就能看到一个最基本的页面。

使用esui的控件

默认情况下，riaproject初始化的项目已经添加了esui的依赖，因此我们可以在模板中直接使用esui的控件，例如：

<!-- src/hello/world.tpl.html -->
<div><div data-ui="type:Button;id:btn">Hello World</div></div>

对于比较复杂的控件，比如esui Table，除了在模板中添加对应的代码之外，还需要在View中补充需要的内容。例如：

<!-- src/hello/world.tpl.html -->
<div data-ui="type:Table;id:table"></div>

我们还需要修改src/hello/WorldView.js，添加esui Table所需要的数据。

HelloWorldView.prototype = {
  template: 'helloWorld',
  ...
  uiProperties: {
    table: {
      datasource: tbDataSource,
      sortable: true,
      columnResizable: true,
      followHead: true,
      breakLine: 1,
      select: 'multi',
      noDataHtml: '<p style="margin:0;">nothing</p>',
      fields: [
        ...
      ]
    }
  },
  ...

esui数据初始化

上边的demo中，Table的数据是由uiProperties.table.datasource（Crumb是使用path，具体参考esui的demo）来初始化的，如果Table初始化的数据需要异步获取，则可以将数据写入Model.prototype.datasource，然后去掉uiProperties.table.datasource字段。

    //src/hello/HelloWorldModel.js
    var datasource = require( 'er/datasuorce' );
    ...
    function HelloWorldModel() {
        Model.apply( this, arguments );
    }

    HelloWorldModel.prototype = {
        // datasource不能是空对象，否则Model的处理逻辑有问题
        datasource: {
            tableData: datasource.remote(url,{
                method: 'POST',
                data: {'key': 'value'}
            })
        }
    };

我们还要在对应子模块下的html中加入一个替换标志data-ui-*:@ModelPrototypeAttribute，这样UIView的处理过程中Model.datasource.tableData才会作为options出现，但是最后会用UIView.uiProperties覆盖一次，所以uiProperties.table中datasource字段不要出现，Model初始化才有效。这个替换规则在ef/doc/UIView.md里边有说明，但是写错了，datasource属性的值应该是this.model.get('users')。

    <!-- src/hello/HelloWorld.tpl.html -->
    <div data-ui="type:Table;id:table;datasource:@tableData"></div>

更多控件的使用方式可以参考esui的demo

model数据配置

er/datasource.js有两个常用的方法constant和remote，可用于设置Model.datasource。而Model.prototype.datasource的数据类型会影响到数据是如何进行配置的。静态数据的配置，并行、串行和嵌套的ajax方法如下。

使用datasource对象配置静态数据：

    HelloWorldModel.prototype = {
        datasource: {
            //constant返回的是一个获取数据的函数，在model实例化后被执行
            path: datasource.constant([
                {
                    text: 'hello',
                    href: ''
                },
                {
                    text: 'helloworld',
                    href: ''
                },
            ]),

            status: datasource.constant({
                'new': '待审批',
                'pass': '预审批完成',
                'reject': '已拒绝'
            })
        }
    };

model.datasource串行配置数据：

    HelloWorldModel.prototype = {
        // 通过一个数组来设置datasource将会串行配置数据
        datasource: [
            { 'config': require( './datasource' ).constant( 'config' ) },
            // remote方法会返回一个发起ajax请求的函数，在model实例化后被执行，这个函数再返回一个promise对象
            { 'list': require( './datasource' ).remote( '/model/list' ) },
            // 可以传入model进行一些自定义的处理
            { 
                 'personal': function ( model ) {
                     return datasource.remote( '/model/something' )().done( function ( result ) ) {
                         // 已经可以读取list的值
                         var list = model.get( 'list' );
                         model.set( 'attr', result.attr, { slient: true } );
                         return result;
                     });
                 }
            }
        ]
    };

model.datasource并行配置数据：

    HelloWorldModel.prototype = {
        // 通过一个对象来设置datasource将会并行配置数据
        datasource: {
            'config': require('./datasource').remote('/model/config'),
            // 可以传入model进行一些自定义的处理
            'personal': function ( model ) {
                 return datasource.remote( '/model/something' )().done( function ( result ) ) {
                     console.log( model.get( 'config' ) );          // undefinded
                     model.set( 'attr', result.attr, { slient: true } );
                     return result;
                 });
            }
        }
    };

model.datasource嵌套配置数据

    HelloWorldModel.prototype = {
        // 数组和对象进行嵌套
        datasource: {
            'one': [ functionOne, functionTwo, functionThree ],
            'two': functionFour,
            'three': [
                { 'four': functionFive },
                { 'five': functionSix }
            ]
        }
    };

上边的代码Model将生成two、four、five三个属性，one和three由于是数组，在这种情况下不会成为属性名，而one中三个函数需要返回一个对象，之后会完整展开到Model中，对象的key将作为Model数据的属性。

上术的写法都是简写，数据配置的完整写法请参考Model.prototype.datasource最后一部分。

获取 URL PARAM

er中URL search是使用~来分隔的，search key/value将在model实例化后被添加为model的数据。

    // www.helloworld.com/#/~index=8964
    HelloWorldModel.prototype = {
        datasource: {
            'data': function ( model ) {
                 var index = model.get( 'index' );    // 8964
                 return datasource.remote( '/model/something', {
                     'method': 'POST',
                     'data': { 'index': index }
                 })().done( function ( result ) ) {
                     return result;
                 });
            }
        }
    };

er模板

如果esui没有想要的控件，自己写tpl可以使用er的模板语法。具体语法请猛戳这里。model的数据将暴露在模板中，在模板中直接使用属性名作为变量即可。

数据模拟

TODO

项目发布

貌似没啥好说的，直接edp build -f即可，生成的代码都在output目录里面。