父模板函数parent

上例中，我们在继承父模板时，需要注入相应的父模板函数。这种方式可以让你继承任意的父模板，而并非一定是父类组件中定义的模板。但大多数情况下，我们都会继承父类组件中定义的模板，在子模板中，通过parent模板函数名即可引用到父模板函数。

例如上例中，子模板无需注入this.layout = parentTemplate，而是像下面这样做

  1. // 直接通过parent引用父类中定义的模板
  2. <t:parent>
  3.     <b:header-content>...</b:header-content>
  4.     <b:content>
  5.         ...
  6.     </b:content>
  7. </t:parent>

逻辑部分，无需注入父模板

  1. var Page = Layout.extend({
  2.     template: template,
  4.     _init: function() {
  5.         return Promise.all([
  6.             ...
  7.         ]);
  8.     }
  9. });

ES6

如果你使用class语法定义组件，则需要使用Intact.template()修饰器来修饰template属性，这样才能够在派生组件中使用parent变量引用到父类组件定义的模板

  1. class Layout extends Intact {
  2.     @Intact.template()
  3.     get template() {
  4.         return `
  5.             <div>
  6.                 <b:body>Layout</b:body>
  7.             </div>
  8.         `;
  9.     }
  10. }
  12. class Page extends Layout {
  13.     @Intact.template()
  14.     get template() {
  15.         return `
  16.             <t:parent>
  17.                 <b:body>{parent()} Page</b:body>
  18.             </t:parent>
  19.         `;
  20.     }
  21. }

使用修饰器(Decorator)语法，需要babel插件支持，babel@6可以这样做npm install --save-dev babel-plugin-transform-decorators-legacy，然后在.babelrc中加入"plugins": ["transform-decorators-legacy"]

完整地控制整个页面，正是Intact一词的由来