触发事件

    • eventName 触发事件名
    • args 传给事件处理函数的参数

    上例中，可以看到触发一个increase事件的方法为：this.trigger('increase')。 通过它我们还可以为事件处理函数传递数据。

    1. var Book = Intact.extend({
    2.     template: template,
    3.     likeThisBook: function() {
    4.         // 将book传给事件处理函数
    5.         this.trigger('like', this.get('book'));
    6.     }
    7. });
    1. var Book = self.Book;
    3. <ul>
    4.     <Book 
    5.         ev-like={self.like}
    6.         v-for={self.get('books')} 
    7.         book={value} 
    8.     />
    9.     你喜欢的书是：{self.get('book')}
    10. </ul>
    1. var App = Intact.extend({
    2.     template: template,
    3.     defaults: function() {
    4.         this.Book = Book;
    5.         return {
    6.             books: ['Javascript程序设计', '未来简史', '红楼梦']
    7.         }
    8.     },
    9.     like: function(book) {
    10.         this.set('book', book);
    11.     }
    12. });
    14. Intact.mount(App, document.getElementById('apptrigger'));

    在Intact实例#$change事件章节，我们介绍过，组件每一次set()触发数据变更， 都会触发相应的事件。所以我们可以监听子组件某个属性的变更，而无需子组件 显式地抛出事件。

    1. var Component = Intact.extend({
    2.     template: template,
    3.     defaults: function() {
    4.         return {count: 0}
    5.     },
    6.         this.set('count', this.get('count') + 1)
    7.     }
    8. });
    1. var Component = self.Component;
    3. <div>
    5.     子组件被点击了{self.get('count') || 0}次
    6. </div>
    1. var App = Intact.extend({
    2.     template: template,
    3.     _init: function() {
    4.         this.Component = Component;
    5.     },
    6.     setCount: function(c, count) {
    7.         this.set('count', count);
    8.     }
    9. });
    11. Intact.mount(App, document.getElementById('apptrigger1'));

    可以看到Component组件并没有显式地抛出事件，但只要count变更，就会触发$change:count事件。

    @since v2.2.0

    从v2.2.0开始，组件还提供了一个$receive事件，它会在组件接收到父组件传给子组件的变更后的新属性 时触发。与$change事件不同的是，$change事件只要属性变更就会，不管属性的来源是父组件传递新属性 值导致，还是内部自己改变的。通过receive事件，我们可以很方便地修正父组件传给自己的属性值。

    例如：下例中，我们将父组件传递的字符串转为数字

    1. var Component = Intact.extend({
    2.     template: template,
    3.     defaults: function() {
    4.         return {value: 0}
    5.     },
    7.     _init: function() {
    8.         // 初始化时，也修正
    9.         this._fixValue();
    10.         // 接收到新值时，修正
    11.         this.on('$receive:value', this._fixValue);
    12.     },
    14.     _fixValue: function() {
    15.         // 如果你打开调试工具，可以看到log信息打印的时机
    16.         // 内部改变，或者数据没有变更时不会执行
    17.         console.log('fix value');
    18.         var value = this.get('value');
    19.         this.set('value', Number(value));
    20.     },
    22.     add: function() {
    23.         this.set('value', this.get('value') + 1)
    24.     }
    1. var Component = self.Component;
    3. <div>
    4.     <Component v-model="count" />
    6. </div>
    1. var App = Intact.extend({
    2.     template: template,
    3.     defaults: function() {
    4.         this.Component = Component;
    5.         return {count: '100'};
    6.     },
    7.     _set: function() {
    8.         this.set('count', 10);
    9.     }
    10. });
    12. Intact.mount(App, document.getElementById('receive'));

    组件的默认事件除了$change类，还有一组跟生命周期相关的事件。详见

    利用实例提供的on(eventName, callback)方法，我们可以给实例对象绑定事件。结合前面提到的默认事件， 我们可以实现类似watch的功能。

    • eventName 监听的事件名
    • callback 事件回调函数，默认this指向触发该事件的实例
    1. var App = Intact.extend({
    2.     template: template,
    3.     defaults: function() {
    4.         return {count: 0}
    5.     },
    6.     _init: function() {
    7.         // 监听count变更，等于5次时，弹出alert
    8.         this.on('$change:count', function(c, count) {
    9.             if (count === 5) {
    10.                 console.log('$change:count', $('#apptrigger2').find('button').text()) 
    11.                 alert('你点击了5次！');
    12.             }
    13.         });
    14.         // 为了测试$change:count和$changed:count的区别
    15.         this.on('$changed:count', function(c, count) {
    16.             if (count === 5) {
    17.                 console.log('$changed:count', $('#apptrigger2').find('button').text()) 
    18.             }
    19.         });
    20.     },
    21.     add: function() {
    22.         this.set('count', this.get('count') + 1);
    23.     }
    24. });
    25. Intact.mount(App, document.getElementById('apptrigger2'));