Question

我最近使用Apostrophe CMS创建了一个新网站，项目中的一个功能是扩展撇号事件，以便列出＆＃34;已注册＆＃34;与每个事件相关联的用户。我能够将新的joinByArray列添加到撇号事件模块中，并且在编辑事件时它可以正常工作。

现在，我尝试在“撇号 - 事件 - 页面”模块中添加“注册”按钮，以便用户可以从每个事件的页面注册该事件。我目前有一个可用的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不是一个函数。我应该将链接代码放在别处吗？

谢谢！

Answer 1

我是位于P＆＃39; unk Avenue的Apostrophe的首席架构师。

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

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

中调用此方法

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

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

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

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并调用我们的{{1}来自jsonCall的jQuery插件：

always.js

请查看教程building a contact form，其中包含有关如何将$.jsonCall('/modules/your-module-name/register', { ... data ... }, function(result) { ... } );文件从模块的always.js文件夹中作为资源推送的材料，等等。

该教程还演示了使用自定义撇号窗口小部件类型为您的前端代码提供主页的技巧，我通常建议这样做。它允许您访问public/js等等。

为按钮操作添加链接

1 个答案: