2

我试图弄清楚如何在 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);
})

问题

当我单击复选框时，不会触发价格变化事件。我已经花了几个小时没有结果，所以任何像我这样在文档中找不到合适示例的人都会感谢任何帮助。

先感谢您。

4

1 回答 1

2

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

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

至于使用复选框，我在这里创建了一个拉取请求来添加对该输入类型的显式支持，因为它以前不存在。它赋予价值的方法对于数值来说并不理想，从技术上讲，该领域就是这样，但我认为这是一个很好的用例。

在计划可用之前，我将提交一份错误报告以解决有关设置插件的问题。现在，您可以尝试以下操作，当计划加载时以及当有人选择不同的计划时，它会更新您的表单。

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

这是此处启用插件的示例所采用的策略。

于 2014-06-06T21:08:22.217 回答