avalon组件使用方法-静水博客

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组件渲染事件:

	avalon2	web component	react
初始化	onInit	createdCallback	getDefaultProps
插入DOM树	onReady	attachedCallback	componentDidMount
视图变化	onViewChange	attributeChangedCallback	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>

上一篇: 判断一个字符串中出现次数最多的字符，统计这个次数

下一篇: img图片加载失败时加载默认图片onerror事件进入循环解决方案

静水缘首页

刘丕水+宋静静于2007年9月相识于山东理工大学，毕业后2011年相恋，共甘苦，历时四年，终于在11月23号拿到了红本本，组建了自己的小家庭......

快速发布

静水缘首页

文章分类

最新文章