0

我最近使用 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 不是函数。我应该把链接代码放在别处吗？

谢谢！

4

1 回答 1

1

我是朋克大道撇号的首席建筑师。

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

您需要将always.jsjavascript 文件推送到浏览器。你可以在你的模块中调用它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 插件中调用always.js：

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

请查看构建联系表单的教程，其中包括有关如何将模块always.js文件public/js夹中的文件作为资产推送的材料等。

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

于 2017-06-26T15:04:18.620 回答