Constructor - #attach() - .create() - #detach() - #propagate()

Constructor

The Cape.DataStore constructor takes no argument and calls its #init method if defined.

Example

var CounterStore = Cape.createDataStoreClass({
  init: function() {
    this.counter = 0;
  },
  increment: function() {
    this.counter++;
    this.propagate();
  }
});

var cs = new CounterStore();
// cs.counter === 0

See also Cape.createDataStoreClass.

#attach()

Usage

• attach(component)

This method registers the component as a target of propagation from this data store.

See #propagate() for details.

.create()

This class method returns a singleton object of this Class.

Example

var CounterStore = Cape.createDataStoreClass({
  init: function() {
    this.counter = 0;
  },
  increment: function() {
    this.counter++;
    this.propagate();
  }
});

var cs1 = CounterStore.create();
var cs2 = CounterStore.create();
// cs1 === cs2

#detach()

Usage

• detach(component)

This method removes the component from the list of targets of propagation from this data store.

See #propagate() for details.

#propagate()

Usage

• propagate()

This method triggars the propagation process, which calls the #refresh() method of all components registerd as targets of propagation of this data store.

Eventually, the #refresh method of each component calls its #render() method, which has to be defined by developers.

Thus, we can assure that each time the data of a data store changes, its all dependent components get refreshed.

Example

var CounterStore = Cape.createDataStoreClass({
  init: function() {
    this.counter = 0;
  },
  increment: function() {
    this.counter++;
    this.propagate();
  }
});

var ClickCounter = Cape.createComponentClass({
  render: function(m) {
    m.div(String(this.ds.counter),
      { onclick: function(e) { this.ds.increment() } })
  }
})

var ds = new CounterStore();
var comp1 = new ClickCounter();
var comp2 = new ClickCounter();

comp1.ds = ds;
comp2.ds = ds;
ds.attach(comp1);
ds.attach(comp2);

comp1.mount('counter1');
comp2.mount('counter2');