javascript - 如何在 RactiveJS 的装饰器中访问对象

Question

我在 RactiveJS 中使用 Pikaday 日期选择器作为装饰器，想在装饰器之外访问日期选择器的 api，但将其添加到返回对象似乎不起作用。请有人指出我正确的方向。

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

Answer 1

装饰器被设计成 Ractive 和外部库之间可重用的桥梁 - 所以而不是 startdate装饰器和一个 enddate装饰器，最好有一个pikaday装饰器。

装饰函数然后负责管理它自己的状态并与 Ractive 实例交互。如果您发现自己试图获取对装饰器创建的对象(即 Pikaday 实例)的引用，这通常是一个危险信号。

这是您可以做到的一种方法:http://jsbin.com/susev/5/edit?html,js,output

在此示例中，我们将键路径传递给装饰器的两个实例。当 pikadayDecorator每个 <input> 调用函数节点，它被调用时有两个参数——节点和键路径。 (您可以有其他参数 - 只需将它们以逗号分隔即可。)

装饰器然后可以设置双向绑定(bind) - 它观察给定的键路径(例如 startdate 或 enddate )并调用 Pikaday 实例的 setDate()改变时的方法。我们还使用 onSelect()当选定日期更改时更新 Ractive 模型的方法 - 这意味着我们可以在模板中的其他地方使用日期，甚至可以在 Ractive 实例之外使用:

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);
});

(请注意，Pikaday 会自动将“2015-01-01”等字符串转换为日期对象。)

有 more information on creating decorators on the docs .