DoneJS StealJS jQuery++ FuncUnit DocumentJS
6.6.1
5.33.3 4.3.0 3.14.1 2.3.35
  • About
  • Guides
  • API Docs
  • Community
  • Contributing
  • Bitovi
    • Bitovi.com
    • Blog
    • Design
    • Development
    • Training
    • Open Source
    • About
    • Contact Us
  • About
  • Guides
  • API Docs
    • Observables
      • can-bind
      • can-compute
      • can-debug
      • can-deep-observable
      • can-define
      • can-define/list/list
      • can-define/map/map
      • can-define-backup
      • can-define-stream
      • can-define-stream-kefir
      • can-event-queue
        • ./map/
          • addEventListener
          • @can.getWhatIChange
          • @can.isBound
          • @can.offKeyValue
          • @can.onKeyValue
          • dispatch
          • listenTo
          • off
          • on
          • one
          • removeEventListener
          • stopListening
        • ./type/
        • ./value/
      • can-kefir
      • can-list
      • can-map
      • can-map-compat
      • can-map-define
      • can-observable-array
      • can-observable-object
      • can-observation
      • can-observation-recorder
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
      • can-value
    • Views
      • can-attribute-observable
      • can-component
      • can-observable-bindings
      • can-stache
      • can-stache-bindings
      • can-stache-converters
      • can-stache-element
      • can-stache-route-helpers
      • can-view-autorender
      • can-view-callbacks
      • can-view-import
      • can-view-live
      • can-view-model
      • can-view-parser
      • can-view-scope
      • can-view-target
      • steal-stache
    • Data Modeling
      • can-connect
      • can-connect-ndjson
      • can-connect-tag
      • can-define-realtime-rest-model
      • can-define-rest-model
      • can-fixture
      • can-fixture-socket
      • can-local-store
      • can-memory-store
      • can-ndjson-stream
      • can-query-logic
      • can-realtime-rest-model
      • can-rest-model
      • can-set-legacy
      • can-super-model
    • Routing
      • can-deparam
      • can-param
      • can-route
      • can-route-hash
      • can-route-mock
      • can-route-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-diff
      • can-globals
      • can-join-uris
      • can-key
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-queues
      • can-string
      • can-string-to-any
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-child-nodes
      • can-control
      • can-dom-data
      • can-dom-events
      • can-dom-mutate
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-fragment
    • Data Validation
      • can-type
      • can-validate
      • can-validate-interface
      • can-validate-legacy
      • can-validate-validatejs
    • Typed Data
      • can-cid
      • can-construct
      • can-construct-super
      • can-data-types
      • can-namespace
      • can-reflect
      • can-reflect-dependencies
      • can-reflect-promise
      • can-types
    • Polyfills
      • can-symbol
      • can-vdom
    • Core
    • Infrastructure
      • can-global
      • can-test-helpers
    • Ecosystem
    • Legacy
  • Community
  • Contributing
  • GitHub
  • Twitter
  • Chat
  • Forum
  • News
Bitovi

listenTo

  • Edit on GitHub

Listen to an event and register the binding for simplified unbinding.

obj.listenTo([bindTarget,] event, handler)

.listenTo is useful for creating bindings that can can be torn down with stopListening. This is useful when creating rich behaviors that can't be accomplished using computed values, or if you are trying to avoid streams.

For example, the following creates an observable that counts how many times its name property has changed:

class Person {
  constructor(){
    this.nameChanged = 0;
    this.listenTo("name", function(){
      this.nameChanged++;
    })
  },
  setName(newVal) {
    this.name = newVal;
    this.dispatch("name",[newVal])
  }
}
mixinMapBindings(Person.prototype);

var person = new Person();
person.setName("Justin");
person.setName("Ramiya");
person.nameChanged //-> 2

.listenTo event bindings are stored on an observable and MUST be unbound using stopListening. .stopListening make it easy to unbind all of the .listenTo event bindings when the observable is no longer needed:

person.stopListening();

If no bindTarget is passed, .listenTo binds to the current observable.

can-component's connectedCallback lifecyle hook is often used to call .listenTo to setup bindings that update viewmodel properties.

Parameters

  1. bindTarget {Object}:

    The object to listen for events on. If bindTarget is not provided, the observable .listenTo was called on will be the bindTarget.

  2. event {String}:

    The name of the event to listen for.

  3. handler {function}:

    The handler that will be executed to handle the event.

Returns

{Object}:

this

CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently 6.6.1.

On this page

Get help

  • Chat with us
  • File an issue
  • Ask questions
  • Read latest news