DoneJS StealJS jQuery++ FuncUnit DocumentJS
4.3.0
5.0.0 3.13.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-define
      • can-define/list/list
      • can-define/map/map
      • can-define-backup
      • can-define-stream
      • can-define-stream-kefir
      • can-event-queue
      • can-kefir
      • can-list
      • can-map
      • can-map-define
      • can-observation
      • can-observation-recorder
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
      • can-value
    • Data Modeling
      • can-connect
      • can-connect-feathers
      • can-fixture
      • can-fixture-socket
      • can-ndjson-stream
      • can-set
    • Views
      • can-component
      • can-stache
      • can-stache-bindings
      • can-stache-converters
      • can-stache-route-helpers
      • can-view-autorender
      • can-view-callbacks
      • can-view-import
      • can-view-live
      • can-view-model
      • can-view-nodelist
      • can-view-parser
      • can-view-scope
      • can-view-target
      • react-view-model
      • react-view-model/component
      • steal-stache
    • 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
      • can-util
      • can-zone
      • can-zone-storage
    • 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-define-validate-validatejs
      • 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
        • addMutatedBy
        • deleteMutatedBy
        • getDependencyDataOf
      • 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

addMutatedBy

  • Edit on GitHub

Register (one to many) mutation dependencies.

.addMutatedBy(observable, [key], observableOrDependencyRecord)

Register a mutation dependency between an observable and optional key, to one or many observables.

Mutation dependencies happen when an observable sets another observable's value, the following example creates two simple observable instances, then listens to the value event on the one observable and sets the value of the observable bound to the two variable:

import canReflect from "can-reflect";
import SimpleObservable from "can-simple-observable";
import canReflectDeps from "can-reflect-dependencies";

const one = new SimpleObservable( "one" );
const two = new SimpleObservable( "two" );

canReflect.onValue( one, function() {
    two.set( /* new value */ );
} );

In order to register this dependency (which is critical for can-debug to work properly), you can use .addMutatedBy like this:

/* code omitted for brevity */

canReflectDeps.addMutatedBy( two, one );

The previous example uses a shorthand to register a value dependency.

It's also possible to register keyDependencies by passing a dependency record object instead. Let's build upon the previous example by creating a simple map instance that sets two's value when its age property changes:

import canReflect from "can-reflect";
import SimpleMap from "can-simple-map";
import SimpleObservable from "can-simple-observable";
import canReflectDeps from "can-reflect-dependencies";

const one = new SimpleObservable( "one" );
const two = new SimpleObservable( "two" );
const me = new SimpleMap( { age: 30 } );

canReflect.onValue( one, function() {
    two.set( /* new value */ );
} );

canReflect.onKeyValue( me, "age", function() {
    two.set( /* new value */ );
} );

Both me and one set the value of two, and this can be registered as follows:

/* code omitted for brevity */

canReflectDeps.addMutatedBy( two, {
    valueDependencies: new Set( [ one ] ),
    keyDependencies: new Map( [ [ me, new Set( [ "age" ] ) ] ] )
} );

An optional key can be passed as a second argument when registering map like observable mutations, e.g:

import canReflect from "can-reflect";
import SimpleMap from "can-simple-map";
import canReflectDeps from "can-reflect-dependencies";

const me = new SimpleMap( { age: 30 } );
const month = new SimpleMap( { day: 10 } );

canReflect.onKeyValue( month, "day", function() {
    me.set( age, /* new value */ );
} );

canReflectDeps.addMutatedBy( me, "age", {
    keyDependencies: new Map( [ [ month, new Set( [ "day" ] ) ] ] )
} );

Parameters

  1. observable {Object}:

    The observable being set by other observable

  2. key {String}:

    The key on a map-like observable

  3. observableOrDependencyRecord {Object}:

    The value-like observable or dependency record with the observable(s) that set the value of the first argument.

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

On this page

Get help

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