javascript - Recurly.js v3和插件

我试图弄清楚如何在Recurly.js v3中使用插件。

我已将一个recurly.Pricing实例附加到表单上，并为一个可选插件创建了一个复选框：

的HTML

<label for="plan-mobile" class="checkbox">
  <input type="checkbox" value="1" data-recurly="addons" data-recurly-addon="plan+mobile" id="plan-mobile">
  Mobile Version
</label>

Java脚本

var pricing = recurly.Pricing();
pricing.attach(subscription_form.get(0)); // subscription_form is a jQuery object

如果我按照文档中的说明使用data-recurly="addon"，则在附加表单时会收到Javascript错误：

Uncaught TypeError: Cannot read property 'addons' of undefined

因此，我认为正确的值是data-recurly="addons"。

我还附加了事件以检测价格变化和插件设置：

pricing.on('set.addon', function(addon) {
  console.log('set.addon');
  console.log(addon);
});

pricing.on('change', function(price){
  console.log('changed price');
  console.log(price);
})

问题

当我单击复选框时，不会触发价格更改事件。我已经花了几个小时而没有结果，所以像我这样在文档中找不到合适示例的人，将不胜感激。

先感谢您。

最佳答案

该文档是正确的，因为您应该使用data-recurly="addon"。

也就是说，attach方法中似乎存在一个错误，该错误试图在添加计划之前向定价实例添加插件。因此，它无法从计划中找到所需的附加信息。

至于使用复选框，我创建了一个Pull Request here来添加对该输入类型的显式支持，因为以前没有该输入类型。它的值赋值方法对于数字值而言并不理想，从技术上讲该字段是理想的，但我认为这是一个很好的用例。

我将提交一个错误报告，以解决在该计划可用之前设置插件的问题。目前，您可以尝试以下操作，该操作将在计划加载时以及有人选择其他计划时更新您的表单。

pricing.on('set.plan', function (plan) {
  // loop through your plan addons
  $.map(plan.addons, function (addon) {
    // add an input to the form corresponding to this addon
  });

  // since the form contents have changed, we need to refresh the binding
  pricing.attach(subscription_form.get(0));
});

这是an addon-enabled example here所采用的策略。