[英]How do I access an object in a decorator in RactiveJS
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. 我正在使用Pikaday日期选择器作为RactiveJS中的装饰器,并想在装饰器外部访问datepicker的api,但是将其添加到返回对象似乎无效。 Can someone point me in the right direction please.
有人可以指出我正确的方向。
http://jsbin.com/lefiyume/1/edit?html,js http://jsbin.com/lefiyume/1/edit?html,js
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. 装饰器被设计为Ractive和外部库之间的可重用桥梁-因此,最好不要使用
startdate
装饰器和enddate
装饰器,而最好使用单个pikaday
装饰器。
The decorator function is then responsible for managing its own state and interacting with the Ractive instance. 装饰器功能然后负责管理其自身的状态并与Ractive实例进行交互。 If you find yourself trying to get a reference to objects created by the decorator (ie the Pikaday instance) it's generally a red flag.
如果您发现自己试图引用由装饰器(即Pikaday实例)创建的对象,则通常是一个危险标记。
Here's one way you could do it: http://jsbin.com/susev/5/edit?html,js,output 这是您可以使用的一种方法: 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. 当在每个
<input>
节点上调用pikadayDecorator
函数时,将使用两个参数调用该函数-节点和键路径。 (You can have additional arguments - just comma-separate them.) (您可以有其他参数-只需用逗号分隔即可。)
The decorator can then set up two-way binding - it observes the given keypath (eg startdate
or enddate
) and calls the Pikaday instance's setDate()
method when it changes. 装饰器然后可以设置双向绑定-它观察给定的键路径(例如
startdate
或enddate
),并在更改时调用Pikaday实例的setDate()
方法。 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: 当选定日期更改时,我们还使用
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);
});
(Note that Pikaday will automatically convert strings like '2015-01-01' to date objects.) (请注意,Pikaday会自动将“ 2015-01-01”之类的字符串转换为日期对象。)
There's more information on creating decorators on the docs . 有关在docs上创建装饰器的更多信息 。
You need to call setDate
inside the saleEndDecorator function. 您需要在saleEndDecorator函数内调用
setDate
。
http://jsbin.com/lefiyume/7/edit http://jsbin.com/lefiyume/7/edit
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.