为按钮操作添加链接答案

【问题标题】：Adding Link for Button Action为按钮操作添加链接
【发布时间】：2017-06-25 23:07:08
【问题描述】：

我最近使用 Apostrophe CMS 启动了一个新站点，该项目中的一个功能将扩展 apostrophe-events 以拥有与每个事件相关联的“注册”用户列表。我能够向 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' });
        });
    }
};

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

（在 lib/modules/apostrophe-events-pages/views/show.html 中）

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

我不确定如何将链接添加到注册操作。我尝试将此代码添加到与上面相同的 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 不是函数。我应该把链接代码放在别处吗？

谢谢！

【问题讨论】：

标签： apostrophe-cms

【解决方案1】：

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

首先，您遇到了困难，因为您尝试从模块的 index.js 文件（即后端 node.js 代码）调用像 link 这样的前端 javascript API。

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

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

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

其次，您可能正在查看的self.link 代码实际上仅适用于“在上下文中”的内容，例如特定对话框。您正在寻找绑定到具有特定数据属性的按钮的任何单击。为此，您可以写：

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 Ready 函数中：

$(function() { ... })

至于调用self.api，非常方便，您可以查看子类化apostrophe-context 来访问它，但您也可以自己构建URL 并从您的@ 调用我们的jsonCall jQuery 插件987654337@:

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

请查看教程building a contact form，其中包含有关如何将模块的public/js 文件夹中的always.js 文件作为资产推送等的材料。

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

【讨论】：