HTML5技术

Omi教程-组件 - 【当耐特】

字号+ 作者:H5之家 来源:H5之家 2017-02-13 13:11 我要评论( )

组件 Omi框架完全基于组件体系设计,我们希望开发者可以像搭积木一样制作Web程序,一切皆是组件,组件也可以嵌套子组件形成新的组件,新的组件又可以当作子组件嵌套至任意组件形成新的组件... 简单组件 这里使用Todo的例子来讲解Omi组件体系的使用。 (data)

组件

Omi框架完全基于组件体系设计,我们希望开发者可以像搭积木一样制作Web程序,一切皆是组件,组件也可以嵌套子组件形成新的组件,新的组件又可以当作子组件嵌套至任意组件形成新的组件...

简单组件

这里使用Todo的例子来讲解Omi组件体系的使用。

(data) (evt) ..() (target).() .[] ),"body");

组件生成的HTML最终会插入到body中。上面的例子展示了Omi的部分特性:

这里需要特别强调的是,为了更加的自由和灵活度。Omi没有内置数据变更的自动更新,需要开发者自己调用update方法。
你也可以和oba或者mobx一起使用来实现自动更新。

[点击这里->在线试试]

组件嵌套

如果页面超级简单的话,可以没有组件嵌套。但是绝大部分Web网页或者Web应用,需要嵌套定义的组件来完成所有的功能和展示。比如上面的Todo,我们也是可以抽取出List。
这样让程序易维护、可扩展、方便复用。如,我们抽取出List:

(data) ()

怎么使用这个List?我们需要使用Omi.makeHTML把List制作成可以声明式的标签,在render方法中就能直接使用该标签。如下所示:

.Todo (data) ....(evt) ....() (target).()

需要注意的是,this.childrenData传递给子组件的data是一锤子买卖,data会被克隆到子组件。意思就是后续只能改变子组件实例的data属性再update才能改变页面。关于Omi组件通讯其实有4种方案,这个后续教程会专门来讲。

[点击这里->在线试试]

招募计划




 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Omi原理-Hello Omi - 【当耐特】

    Omi原理-Hello Omi - 【当耐特】

    2017-02-10 08:02

  • Omi原理-环境搭建 - 【当耐特】

    Omi原理-环境搭建 - 【当耐特】

    2017-02-08 15:01

  • 微信小程序教程(第四篇) - 周全535201285

    微信小程序教程(第四篇) - 周全535201285

    2017-02-06 18:01

  • 微信小程序教程(第二篇) - 周全535201285

    微信小程序教程(第二篇) - 周全535201285

    2017-02-06 17:01

网友点评
m