How do I access an object in a decorator in RactiveJS

Question

I am using Pikaday date picker as a decorator in RactiveJS and want to access the api of the datepicker outside of the decorator, but adding it to the return object doesn't seem to work. Can someone point me in the right direction please.

http://jsbin.com/lefiyume/1/edit?html,js

Answer 1

Decorators are designed to be reusable bridges between Ractive and external libraries - so rather than having a startdate decorator and an enddate decorator, it's better to have a single pikaday decorator.

The decorator function is then responsible for managing its own state and interacting with the Ractive instance. If you find yourself trying to get a reference to objects created by the decorator (i.e. the Pikaday instance) it's generally a red flag.

Here's one way you could do it: http://jsbin.com/susev/5/edit?html,js,output

In this example, we're passing a keypath to both instances of the decorator. When the pikadayDecorator function is called with each <input> node, it gets called with two arguments - the node, and the keypath. (You can have additional arguments - just comma-separate them.)

The decorator can then set up two-way binding - it observes the given keypath (e.g. startdate or enddate) and calls the Pikaday instance's setDate() method when it changes. We also use the onSelect() method to update Ractive's model when the selected date changes - this means that we can use the date elsewhere in our template, or even outside the Ractive instance:

ractive.observe('startdate', function (newDate) {
  // This may have been as a result of a `ractive.set()`, or
  // because the user interacted with the datepicker
  console.log('startdate changed to', newDate);
});

(Note that Pikaday will automatically convert strings like '2015-01-01' to date objects.)

There's more information on creating decorators on the docs.

Answer 2

You need to call setDate inside the saleEndDecorator function.

http://jsbin.com/lefiyume/7/edit