javascript - Recurly.js v3 和插件

Question

我正在尝试弄清楚如何在 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>

Javascript

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

问题

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

提前谢谢你。

Answer 1

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

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

至于使用复选框，我创建了一个 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 所采用的策略.