Use

Observable from an initial value

At its simplest, with can be used to create an observable from another initial value. As how an age observable being created in this next example:

import { value } from "can";

const age = value.with(15);

console.log(age.value); //-> 15

Notice that onValue can be used to listen to changes. The following shows creating an age observable, reading it's value, then listening when age changes:

import { value, Reflect as canReflect } from "can";

const age = value.with(15);

const handler = newValue => {
  console.log(newValue); //-> 18 ... time to Vote!
};

canReflect.onValue(observable, handler);
age.value = 18;

Observable derived from other values

returnedBy can be used to create an observable value that derives its value from other observable values. When the derived values change, the observable's value will be updated automatically.

The following creates a fullName observable that derives its values from the first and last observables. The value of the observable is read with fullName.value. Notice how onValue is used to listen when the observable value changes. When one of the values from which the observable derives its value changed:

import { value, Reflect as canReflect } from "can";

const first = value.with("Grace");
const last = value.with("Murray");

const fullName = value.returnedBy(() => {
  return first.value + " " + last.value;
});

console.log(fullName.value); //-> "Grace Murray"

const handler = newValue => {
  console.log(newValue); //-> "Grace Hopper"
};

canReflect.onValue(fullName, handler);
last.value = "Hopper";

Bind to other objects

Use can-value when you need an observable that can get or set a property on an object.

In the example below, we use bind to get an observable that can get and set outer.inner.key:

import { ObservableObject, value } from "can";

const outer = new ObservableObject({
  inner: {
    key: "hello"
  }
});

const keyObservable = value.bind(outer, "inner.key");

// reading `keyObservable.value`, we get the value at `outer.inner.key`
console.log(keyObservable.value); //-> "hello"

// writing to `keyObservable.value` will change the value at `outer.inner.key`
keyObservable.value = "aloha";
console.log(outer.inner.key); //->"aloha"

from and to exist to create observables that just get or just set properties on an object, respectively.