children属性

上面定义的组件都是自闭合的组件,有时候我们想给组件填充其它元素,就像 <select>标签填充<option>一样,应该怎么做呢?

事实上,所有组件标签内部的元素都会被当做组件的children属性,所以我们 可以在组件模板中,通过self.get('children')获取它。

例如我们可以实现一个支持label的Checkbox组件:

  1. <label>
  2. <input type='checkbox'>{self.get('children')}
  3. </label>
  1. var Checkbox = Intact.extend({
  2. template: template
  3. });
  1. var Checkbox = self.Checkbox;
  2. // Checkbox标签中的内容会当做children属性传给Checkbox组件实例
  3. <Checkbox>请勾选</Checkbox>
  1. Intact.extend({
  2. template: template,
  3. _init: function() {
  4. this.Checkbox = Checkbox;
  5. }
  6. });

这个Checkbox并不完整,仅仅为了演示children属性