Intact类方法

Intact.extend

继承Intact来创建一个组件，新创建的组件可以继续调用它的extend()来创建子组件。

Intact.extend(property)

  • @param proptery {Object} 指定组件的原型链属性和方法
  • @param {Intact Class}
  • @example
  1. var App = Intact.extend({
  2.     template: '<div>{self.get("title")}</div>',
  3.     defaults: function() {
  4.         return {title: 'Intact'};
  5.     }
  6. });
  8. Intact.mount(App, document.getElementById('app'));

Intact.mount

将一个组件挂载到指定节点下（appendChild）

Intact.mount(Component, dom)

  • @param Component {Intact Class} 要挂载的组件
  • @param dom {HtmlElement} 指定要挂载的地方
  • @return {Intact} 返回组件的实例
  • @example 见上例

Intact.hydrate

将组件与指定节点的子元素混合，用于服务器端渲染后，前端重新建立绑定关系的情况。

Intact.hydrate(Component, dom)

  • @param Component {Intact Class} 要混合的组件
  • @param dom {HtmlElement} 要混合的节点
  • @return {Intact} 返回组件的实例
  • @example

假设服务器端渲染的结果如下：

Click me 0 times!

上述元素点击没有事件，我们可以通过混合，给它绑定上事件

  1. var App = Intact.extend({
  2.     template: '<div ev-click={self.set.bind(self, "times", self.get("times") + 1)}>\
  3.         Click me {self.get("times")} times!</div>',
  4.     defaults: function() {
  5.         return {times: 0};
  6.     }
  7. });
  9. Intact.hydrate(App, document.getElementById('hydrate'))

当你点击“点击运行”按钮执行上述混合操作，上面的元素就会绑定上事件和数据了。

混合（hydrate）并不是单纯地用组件渲染的元素替换掉之前的元素，而是复用之前的元素， 然后重新建立起绑定关系。