为按钮操作添加 Link

Question

我最近使用 Apostrophe CMS 创建了一个新网站，该项目的其中一项功能是扩展 apostrophe-events 以包含与每个事件关联的 "registered" 用户的列表。我能够向 apostrophe-events 模块添加一个新的 joinByArray 列，并且在编辑事件时它可以正常工作。

现在，我正在尝试向 apostrophe-events-pages 模块添加一个注册按钮，以便用户可以从每个活动的页面注册该活动。我目前有一个有效的 API 端点可用，它是我使用以下代码创建的：

（在文件 lib/modules/apostrophe-events-pages/index.js 中）

module.exports = {
    construct: function(self, options) {
        self.route('get', 'register', function(req, res) {
            // Validate things with the launder module
            var name = self.apos.launder.string(req.body.name);
            // Deliver a JSON response
            return res.send({ status: 'ok', moreInfo: 'something' });
        });
    }
};

该端点按预期工作，但我坚持在前端添加一个带有 link 的按钮以执行正确的操作。我创建了一个在我创建的 show.html 覆盖中看起来正确的按钮，代码如下：

(在lib/modules/apostrophe-events-pages/views/show.html)

{{ buttons.minor('Register for Field Trip', { action: 'register' }) }}

我不确定如何向注册操作添加 link。我尝试将此代码添加到与上面相同的 index.js 文件中：

(在lib/modules/apostrophe-events-pages/index.js)

self.registerEvent = function() {
    var res;
    self.api('register', {}, function(result) {
        res = results;
    });
};

var superBeforeShow = self.beforeShow;
self.beforeShow = function(callback) {
    self.link('register', self.registerEvent);
    return superBeforeShow(callback);
};

但是当我访问事件页面时，发生了一个错误，提示 self.link 不是一个函数。我应该把 link 代码放在别处吗？

谢谢！

Answer 1

我是 P'unk Avenue 的 Apostrophe 首席架构师。

首先，您遇到困难是因为您试图从模块的 index.js 文件调用前端 javascript API，例如 link，它是后端 node.js代码。

您需要将 always.js javascript 文件推送到浏览器。您可以在模块的 index.js:

中调用它

self.pushAsset('script', 'always', { when: 'always' });

然后用您的前端代码填充模块的 public/js/always.js 文件。

其次，您可能正在查看的 self.link 代码实际上仅适用于 "in context," 的内容，例如特定对话框。您希望绑定到具有特定数据属性的按钮上的任何点击。为此，您可以这样写：

apos.ui.link('register', 'event', function($el, _id) { ... }

在您的 always.js 中，此代码将响应名为 register-event:

的任何操作

{{ buttons.minor('Register for Field Trip', { action: 'register-event' }) }}

但这只是编写 jQuery 委托事件处理程序的一种便捷方式。你也可以只写：

$('body').on('click', '[data-register-event]', function() { ... })

您应该将 always.js 代码包装在 DOM 就绪函数中：

$(function() { ... })

至于调用self.api，这很方便，你可以查看子类apostrophe-context来访问它，但你也可以自己构建URL和从您的 always.js:

调用我们的 jsonCall jQuery 插件

$.jsonCall('/modules/your-module-name/register',
  { ... data ... },
  function(result) { ... }
);

请查看教程 building a contact form，其中包括 material 如何从模块的 public/js 文件夹中将 always.js 文件作为资产推送等等上。

该教程还演示了使用自定义撇号小部件类型为您的前端代码提供主页的技术，我通常推荐这样做。它使您可以访问 self.api 等等。

为按钮操作添加 Link

Adding Link for Button Action

apostrophe-cms