组件

组件

pandyle使用p-com属性提供组件功能。pandyle中的组件实质就是一段html代码，在标签中使用p-com属性来指定组件的名称。VM会根据p-com中指定的名称和Pandyle配置中的comPath字段去加载对应的组件并渲染。如果没有设置comPath，VM会在默认的./components文件夹中寻找对应名称的组件。

示例代码：/index.html中：

    <div class="main">
        <div p-com="demo.book" p-context="|{title: '三国演义', author: '罗贯中', price: 150}"></div>
    </div>
    <script>
        //使用Pandyle.config来设置comPath
        Pandyle.config({
            comPath:{
                demo: '/demo/components/{name}.html'
            }               
        });
        $('.main').vm();
    </script>

示例代码：/demo/components/book.html文件夹中:

    <div>
        <p>书名：{{title}}</p>
        <p>作者：{{author}}</p>
        <p>价格：{{price}}</p>
    </div>

在组件中，可以使用<style>标签来定义样式，使用<script>标签添加js代码。注意，在<script>中需使用window.xxx = …来定义全局的函数或变量。

示例代码：/demo/components/book.html文件中:

    <div class="book">
        <p class="title">书名：{{title}}</p>
        <p class="author">作者：{{author}}</p>
        <p class="price">价格：{{price}}</p>
        <button p-bind="onclick: buy({{price}})">购买</button>
    </div>
    <style>
        .book{
            border: 1px solid brown;
        }
        .title{
            color: red;
        }
        .author{
            color: blue;
        }
        .price{
            color: brown;
        }
    </style>
    <script>
        window.buy = function(price){
            if(price > 100){
                alert('太贵，不买了');
            }else{
                alert('不贵，买了');
            }
        }
    </script>

在组件的<script>中，可以使用this.onLoad来设置每次组件加载之后要执行的函数（不通过this.onLoad，而直接写在<script>中的代码，将只在第一次引用组件的时候执行，通常用来定义一些全局的函数或变量）。

示例代码:

    ...
    <script>
        this.onLoad = function(context){
            console.log(context);  //context是当前组件的上下文
        }
    </script>

关于p-bind和p-com的顺序:在渲染模板时，p-bind的解析在p-com之前，因此，你可以使用p-bind来动态加载组件。

示例代码:

    <div p-bind="p-com: {{type}}" p-context="info"></div>
    ...
    <script>
        var goods = {
            type: 'book',
            info: {
                title: '三国演义',
                author: '罗贯中',
                price: 150
            }
        };
        $('div').vm(goods);
    </script>