ESUI Next

esui-next.md

1. 更适合MVVM模型的架构

    <ui-text-box data-ui-value="~name"></ui-text-box>
   
    <script>
        var Model = require('model/Model');
        var user = new Model();
        user.set('name', 'foo');
   
        require('esui-next').init(document.body, { model: user });
        model.set('name', 'bar'); // 控件自动变为bar
   
        // 用户在控件输入alice
        model.get('name'); // <-- alice
    </script>
   

2. 集合的双向绑定

    <ui-table data-ui-datasource="@datasouce">
    </ui-table>
   
    <script>
        var Collection = require('model/Collection');
        var list = new Collection();
        list.add(foo);
   
        require('esui-next').init(document.body, { model: user });
        list.add(bar);
        list.remove(foo);
    </script>
   

3. 行为模型

    <ui-label>
        <!-- 可在父容器范围内拖动 -->
        <behavior-draggable data-ui-containment="parent"></behavior-draggable>
        <!-- 联动其它控件 -->
        <behavior-cascade data-ui-target="#foo" data-ui-action="visibility"></behavior-cascade>
        <behavior-cascade data-ui-target="#bar" data-ui-action="availablity"></behavior-cascade>
        <ui-property name="text">Hello World</ui-property>
    </ui-label>
   

4. 控件自带模板

    <ui-select data-ui-datasource="@datasource">
        <script type="text/template" data-for="itemTemplate">
            [[ if: ${item.master} ]]
                <span style="color: red">${item.text}</span>
            [[ else: ]]
                <span>${item.text}</span>
            [[ /if ]]
        </script>
    </ui-select>
   

模板那块，是否使用tempalte 节点替代？ 这样可以接近 web components。

我想引入 meta class的特性，通过统一的工厂方法定义新的控件，大概如下：

function ControlConstructor(){
      //xxxx
}

var ui = require('esui-next');

// 直接创建一个新的控件，默认继承 Control， 参数为 class meta配置. control工厂方法默认完成了控件的注册。
var MyControl = ui.control({
    constructor: ControlConstructor,
    name: 'MyControl',
    method1: xxx
});

// 后添加方法：
MyControl.method('method2', xxxx);

// 模板方法 $super, 对于需要严格模式的，可以考虑 $super('methodName', arguments)
MyControl.method('initBehavior', function(){
   // xxxxx
   this.$super(arguments);
});

//继承已有控件：
var SubControl = ui.control('MyControl', {
    name: 'SubControl'
});

meta class 对于业务类可能不大适合，因为业务的继承方式比较灵活，对esui可能更适合， esui属于控件库，有自己的一套闭环体系是正常的。

这种方式缺点是，ide 可能不好快速查找对应方法的 source code 了。

模板那块，是否使用tempalte 节点替代？ 这样可以接近 web components。

理想的就应该那样，我一直被浏览器兼容性拖着想法，还不敢放开步子……因为template其实是个功能性元素，怕兼容性搞不好

另外你可以考虑先去把oo.js做了，让ER和ESUI等继承啥的全用你的吧