ractive-component

Ractive Component

1
2
3
SomeComponent = Ractive.extend({
// options here ...
})

SomeComponent 可以

  • 注册到全局 Ractive.components.SomeComponent = SomeComponent
  • 或者传进new Ractive 构造器
    1
    2
    3
    4
    5
       new Ractive({
    components: {
    SomeComponent: SomeComponent
    }
    });

关于 Ractive.components 其实就是注册默认值,注册在Ractive.defaults,但是关于插件的东东如 components,partials,adaptor,动画神马的…. 可以简易的放在Ractive.xxx上面

方法

  • beforeInit -> onconstruct
  • init -> onrender

箭头的意思是,前面是deprecated,后面是现在(RactiveJs v0.6.1)用的.

1
new Date // Sat Feb 21 2015 20:25:18 GMT+0800 (中国标准时间)

onconstruct(options)

还没有render

  • this为正在构建的 Ractive instance
  • options为 子component 作为 new Ractive 时的options

onrender()

thisRactive instance , 此时 dom 已经render完毕


发现现有的Ractive component 有些问题

例如我在移植bootstrap的Button为Ractive的components

1
2
3
4
5
6
7
8
var Button = Ractive.extend({
template: '<button on-click="click" class="btn { {#category} } btn-{ {category} } { {/} } { {#size} } btn-{ {size} } { {/} } { { class } }">{ {>content} }</button>',
data: {
category: '',
size: '', // default-size , take `xs`,`sm`,`large`
}
}
// 写成 { { } } 为了过 hexo g, swig

tmpl

1
2
3
<Button category='warning' size='xs' class='pull-right' on-click='do-something'>
这是一个按钮
</Button>

这个事件处理有一些问题,在Button组件上写的 on-click = ‘do-something’ , 会在这个component的 _sub 下面有相关的proxy event,就是说这个click是一个proxy-event,必须由子元素触发,so 在模板里面有了on-click='click'

用户点击按钮 -> 由于on-click=click,所以用addEventListener添加了click handler,这个click handler触发click proxy event,接着冒泡到Button component.
也就是说,这个Button component要支持什么原生事件(click,mouseover,mouseleave) 啥的,都得在 Button的template中写上 on-click=click,on-mouseover=mouseover,on-mouseleave=mouseleave. 有点麻烦.

而且component也是 ractive instance,有自己的data context,写上 on-click = ‘someMethod()’ , 这个some-method 必须在这个component中定义,但是常用的应该是这个 component与外界通过 on-click 神马的打交道,应该使用 父级的ractive作用域才对…也就是组件本身 Button 不生成dom

貌似React有个办法是,即组件只有一个Child 元素,这样写在组件上的东西直接传到这个唯一的元素上就是了…

不知道自己在说啥,诶!!!