模板传递

模板片段可以像普通对象一样赋值并且传递。当一个组件结构支持完全自定义时，我们可能需要为组件的每一处自定义模板，利用模板传递，这很容易做到。

例如，在菜单组件中，我们点击菜单触发器，就会弹出菜单，假设菜单触发器和菜单都可以自定义模板，我们可以如下这么做：

  1. <div>
  2.     <div ev-click={self.toggle.bind(self)}>
  3.         {self.get('triggerTemplate')}
  4.     </div>
  5.     <div v-if={self.get('show')}>
  6.         {self.get('menuTemplate')}
  7.     </div>
  8. </div>
  1. var Menu = Intact.extend({
  2.     template: template,
  3.     defaults: function() {
  4.         return {
  5.             show: false,
  6.             triggerTemplate: null,
  7.             menuTemplate: null
  8.         };
  9.     },
  10.     toggle: function() {
  11.         this.set('show', !this.get('show'));
  12.     }
  13. });

然后我们在使用Menu组件时，自定义triggerTemplate和menuTemplate的内容

  1. var Menu = Menu;
  3. <Menu 
  4.     triggerTemplate={<button>{self.get('title')}</button>}
  5.     menuTemplate={<ul>
  6.         <li v-for={self.get('list')}>
  7.             {value}
  8.         </li>
  9.     </ul>}
  10. />
  1. Intact.extend({
  2.     template: template,
  3.     defaults: function() {
  4.         this.Menu = Menu;
  5.         return {
  6.             title: '书籍（点击展开/收起）',
  7.             list: ['Javascript编程', '时间简史', '红楼梦']
  8.         };
  9.     }
  10. });