数据绑定

这里描述了,如何编写动态模版、如何进行数据更新和触发UI渲染的机制。 模板语法以{}包裹jsx形式作为模板语法,以下是关于模板的几个方面

模版语法

目前支持的是jsx语法,点击jsx了解更多关于jsx的信息

数据更新和UI渲染

更新操作统一通过update接口完成,调用rosetta组件对象实例的update接口,Rosetta将为你自动完成properties值的更新、UI的重新渲染

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

            clicktest: function() {
                this.update({
                    text: '更新啦'
                });
            }
        })
    </script>
</element>
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <r-example ref="example"></r-example>
        <script type="text/javascript">
            Rosetta.ready(function() {
                Rosetta.ref('example').update({
                    text: '外部更新一下'
                });
            });
        </script>
    </body>
    </html>

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