一分钟功能概览

Rosetta让开发者能够更便捷的以声明式来写组件 核心功能custom elements使得开发者编写交互组件和复杂应用的时候更加容易

总体说来Rosetta的custom elements包含一下核心功能

这里你可以看到每个核心功能的例子

引用组件

引用方式如下:

<link rel="import" type="text/html" href="r-slider.html">

注册组件

定义:

<element name="r-slider">
    <style>
    </style>
    <template>
    </template>
    <script type="text/javascript">
        Rosetta({
            is: 'r-slider',
            properties: {
                list: {
                    type: Array,
                    value:[
                        {
                            title: '111'
                            src: 'xxx'
                        },
                        {
                            title: '222'
                            src: 'zzz'
                        }
                    ]
                },
                text: {
                    type: String,
                    value: '测试'
                }
            }
        })
    </script>
</element>

使用:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <r-slider text="啦啦啦" list="[]">
    </r-slider>
</body>
</html>

内部DOM结构

组件可以定义其内部的DOM结构,通过<template></template>标签包裹

<element name="r-slider">
    <style>
    </style>
    <template>
        <div>
            {text}
        </div>
    </template>
    <script type="text/javascript">
        Rosetta({
            is: 'r-slider',
            properties: {
                list: {
                    type: Array,
                    value:[
                        {
                            title: '111'
                            src: 'xxx'
                        },
                        {
                            title: '222'
                            src: 'zzz'
                        }
                    ]
                },
                text: {
                    type: String,
                    value: '测试'
                }
            }
        })
    </script>
</element>

组件容器

组件通过<content></content>声明自身的容器,并通过select字段作为选择器过滤,比如select='.aaa'的表示只会将当前组件使用时定义的子元素中选择器符合'.aaa'的元素作为实际子元素,其他的会自动忽略,比如

定义

<element name="r-slider">
    <style>
    </style>
    <template>
        <div>
            {text}
        </div>
        <content select='.aaa'>
        </content>
    </template>
    <script type="text/javascript">
        Rosetta({
            is: 'r-slider',
            properties: {
                list: {
                    type: Array,
                    value:[
                        {
                            title: '111'
                            src: 'xxx'
                        },
                        {
                            title: '222'
                            src: 'zzz'
                        }
                    ]
                },
                text: {
                    type: String,
                    value: '测试'
                }
            }
        });
    </script>
</element>

使用: 假如目录结构如下

-
- index.html
- elements
    - r-slider.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <link rel="import" type="text/html" href="elements/r-slider.html">
    <r-slider text="啦啦啦" list="[]">
        <div class="aaa">
            我会被选中
        </div>
        <div>
            我会被忽略
        </div>
    </r-slider>
</body>
</html>

生命周期

Rosetta为custom elements实现了和标准一致的生命周期:

属性声明

在组件定义的时候,register函数的第二个参数renderFunction里,可以进行属性默认值的声明

<element name="r-slider">
    <style>
    </style>
    <template>
    </template>
    <script type="text/javascript">
        Rosetta({
            is: 'r-slider',
            properties: {
                list: {
                    type: Array,
                    value:[
                        {
                            title: '111'
                            src: 'xxx'
                        },
                        {
                            title: '222'
                            src: 'zzz'
                        }
                    ]
                },
                text: {
                    type: String,
                    value: '测试'
                }
            }
        });
    </script>
</element>

使用组件的时候以attributes的方式进行属性初始化:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <r-slider text="初始化属性" list="[]">
    </r-slider>
</body>
</html>

事件绑定

<element name="r-button">
    <style>
    </style>
    <template>
        <div onClick={clicktest}>
            测试点击
        </div>
    </template>
    <script type="text/javascript">
        Rosetta({
            is: 'r-button',
            clicktest: function() {
                alert('clicked');
            }
        })
    </script>
</element>
<element name="r-button" onAttached={attachcb}>
    <style>
    </style>
    <template>
    </template>
    <script type="text/javascript">
        Rosetta({
            is: 'r-button',
            attachcb: function() {
                alert('clicked');
            }
        })
    </script>
</element>

数据更新

通过element实例的attachcb接口,进行数据更新,比如在组件渲染完毕的时候进行数据更新

<element name="r-button" onAttached={attachcb}>
    <style>
    </style>
    <template>
        <div>
            {text}
        </div>
    </template>
    <script type="text/javascript">
        Rosetta({
            is: 'r-button',
            properties: {
                text: '测试'
            }
            attachcb: function() {
                this.text = 'after render';
            }
        });
    </script>
</element>

组件嵌套

Rosetta支持自定义组件的嵌套,使用方式和普通标签一样,组件嵌套有两种情况,一类是定义嵌套,第二类是使用时嵌套

    <element name="r-a" onAttached={attachcb}>
        <style>
        </style>
        <template>
            <link rel="import" type="text/html" href="r-b.html">
            <r-b>
                我是被嵌套的组件
            </r-b>
            <div>
                {text}
            </div>
        </template>
        <script type="text/javascript">
            Rosetta({
                is: 'r-a',
                properties: {
                    text: '测试'
                }
                attachcb: function() {
                    this.text = 'after render';
                }
            });
        </script>
    </element>
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <div>测试嵌套</div>
        <r-b>
            <r-a>
                我是被嵌套的组件
            </r-a>
        </r-b>
    </body>
    </html>

发现了问题或想要贡献?来 Github 和Rosetta联系或者Fork吧!: /docs/beginning/core.md