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
    }
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

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

    ## 方法

    - beforeInit -> onconstruct
    - init -> onrender

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

    ```js
    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 元素,这样写在组件上的东西直接传到这个唯一的元素上就是了…

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