otakustay/esui-next.md

## esui-next.md

      
    Raw
  

              esui-next.md
            
          
更适合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>


集合的双向绑定
 <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>


行为模型
 <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>


控件自带模板
 <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>