Riot - Observable

作者: 果汁凉茶丶 | 来源:发表于2017-11-24 16:09 被阅读24次

    该文提炼了 Riot 中最为关键的几个 Observable,用熟它们,你,就是Riot大神!

    riot.observable(el)


     为 el 对象添加 Observer 支持,如果参数为空,则返回一个新创建的 observable 实例。之后该对象就可以触发和监听事件了。

    function Car() {
    
      // 使 Car 实例成为 observable
      riot.observable(this)
    
      // 监听 'start' 事件
      this.on('start', function() {
        // 启动
      })
    
    }
    
    // 创建一个新的 Car 实例
    var car = new Car()
    
    // 触发 'start' 事件
    car.trigger('start')
    

    @返回值 参数 el 或新的observable 实例

    el.on(events, callback)


     监听用空格分隔的 event 列表,每次事件被触发时调用 callback

    // 监听单个事件
    el.on('start', function() {
    
    })
    
    // 监听多个事件,事件类型将作为回调函数的参数传递
    el.on('start stop', function(type) {
      // type 是 'start' 或 'stop'
    })
    
    // 监听此 observable 上的所有事件
    el.on('*', function(event, param1, param2) {
      // event will be the name of any event triggered
      // do something with the parameters
    })
    

    @返回值 el

    el.trigger(events)


    触发事件。执行所有监听由空格分隔的 events 的回调函数

    el.trigger('start')
    el.trigger('render update')
    

    @返回值 el

    el.trigger(event, arg1 … argN)


    执行所有监听 event 的回调函数,可以传递任意数量的附加参数给监听器。

    // 监听 'start' 事件,并期待附加参数
    el.on('start', function(engine_details, is_rainy_day) {
    
    })
    
    // 触发 start 事件,并传递附加参数
    el.trigger('start', { fuel: 89 }, true)
    

    @返回值 el

    el.one(events, callback)


     监听的由空格分隔的 events 列表, 但只执行 callback 最多一次.

    // 即使 'start' 被触发多次,也只执行回调函数一次
    el.one('start', function() {
    
    })
    

    @返回值 el

    el.off(events)


    删除参数中指定的以空格分隔的 events 的监听器

    el.off('start stop')
    

    @返回值 el

    el.off(events, fn)


    从给定的事件列表的监听器中删除指定的那个

    function doIt() {
      console.log('starting or ending')
    }
    
    el.on('start middle end', doIt)
    
    // 从 start 和 end 事件的监听器中删除指定的那个
    el.off('start end', doIt)
    

    el.off(‘*’)


    删除所有事件的所有监听器,
    @返回值 el

    el.off(‘*’, fn)


    对所有的事件删除指定的回调函数,
    @返回值 el

    相关文章

      网友评论

        本文标题:Riot - Observable

        本文链接:https://www.haomeiwen.com/subject/ihkfbxtx.html