Ractive Component

SomeComponent = Ractive.extend({
  // options here ...
});

SomeComponent 可以

• 注册到全局 Ractive.components.SomeComponent = SomeComponent
• 或者传进 new Ractive 构造器

  new Ractive({
  components: {
  SomeComponent: SomeComponent
  }
  });

  关于 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()

this 为 Ractive instance , 此时 dom 已经 render 完毕

---

发现现有的 Ractive component 有些问题

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

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

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

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