avalon组件使用方法
2017/06/30    标签: avalon组件   

详情请看官网组件部分:http://avalonjs.coding.me/component.html

这里只写几个demo

1,avalon的slot插槽机制(建议用<xmp></xmp>)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>slotDemo</title>
    <meta name="keywords" content="关键字" />
    <meta name="description" content="描述" />
    <style type="text/css">
        .ms-controller{
                /*防止页面加载出现{{}},avalon自带机制,渲染完成删除dom上的ms-controller样式*/
            visibility:hidden;
        }
    </style>
</head>
<body>
    <div  ms-controller="test" class="ms-controller wrapper">
        <xmp ms-widget="{is:'ms-dialog',content:'数据绑定1'}">
            <div slot="title">
                这是标题
            </div>
            <div slot="content">
                这是内容
            </div>
        </xmp>
    </div>
    <script src="https://cdn.bootcss.com/avalon.js/2.2.1/avalon.min.js"></script>
    <script type="text/javascript">
        avalon.component('ms-dialog',{
            template:'<div class="dialog">'
            +'<div>这是一个测试</div>'
            +'<h1><slot name="title"/></h1>'
            +'<slot name="content" />'
            +'{{@content}}'
            +'</div>',
            defaults:{
                content:'数据绑定'
            }
        });
        avalon.define({$id:'test'});
    </script>
</body>
</html>

2.avalon组件渲染事件:


avalon2web componentreact
初始化 onInitcreatedCallback getDefaultProps
插入DOM树 onReadyattachedCallback componentDidMount
视图变化 onViewChangeattributeChangedCallback componentDidUpdate
移出DOM树 onDispose detachedCallback componentWillUnmount
<!DOCTYPE html>
<html>
    <head>
        <title>ms-if</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style type="text/css" media="screen">
            .ms-controller{
                visibility:hidden;
            }
        </style>
   </head>
    <body>
        <div ms-controller='test' class="ms-controller">
            <xmp ms-widget="{is:'ms-button',url:'https://api.github.com/search/repositories?q=javascript&sort=stars'}"></xmp>
        </div>
        <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/avalon.js/2.2.7/avalon.min.js"></script>
        <script type="text/javascript">
            avalon.component('ms-button', {
                template: '<div><button ms-on-click="@loading">加载</button><ol>'
                +'<!--ms-for: el in @items-->'
                +'<li>{{el.url}}</li>'
                +'<!--ms-for-end:--></ol></div>',
                defaults: {
                    url:'',
                    items:[],
                    loading:function($event){
                        var that=this;
                        $.get(this.url,function(data){
                            for(var x in data.items){
                                data.items[x].homepage==null&&(data.items[x].homepage='');
                                data.items[x].mirror_url==null&&(data.items[x].mirror_url='');
                                that.items.push(data.items[x])
                            }
                        });
                    },
                    onReady:function($event){
                        //渲染完毕执行
                        $('body').append('渲染完毕')
                    }
                }
            })

            avalon.define({
                $id:"test"
            });

        </script>
    </body>
</html>

对比软一峰的react例子:

<!DOCTYPE html>    
<html>    
<head>    
<script src="../build/react.js"></script>    
<script src="../build/react-dom.js"></script>    
<script src="../build/browser.min.js"></script>    
<script src="../build/jquery.min.js"></script>    
</head>    
<body>    
<div id="example"></div>    
<script type="text/babel">    
var RepoList = React.createClass({    
  getInitialState: function() {    
    return {    
      loading: true,    
      error: null,    
      data: null    
    };    
  },    
  componentDidMount() {    
    this.props.promise.then(    
      value => this.setState({loading: false, data: value}),    
      error => this.setState({loading: false, error: error}));    
  },    
  render: function() {    
    if (this.state.loading) {    
      return <span>Loading...</span>;    
    }    
    else if (this.state.error !== null) {    
      return <span>Error: {this.state.error.message}</span>;    
    }    
    else {    
      var repos = this.state.data.items;    
      var repoList = repos.map(function (repo, index) {    
        return (    
          <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>    
        );    
      });    
      return (    
        <main>    
          <h1>Most Popular JavaScript Projects in Github</h1>    
          <ol>{repoList}</ol>    
        </main>    
      );    
    }    
  }    
});    
ReactDOM.render(    
  <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,    
  document.getElementById('example')    
);    
    </script>    
</body>    
</html>