Добавление ссылки для действия кнопки

Недавно я запустил новый сайт с Apostrophe CMS, и одна из функций проекта будет расширять апостроф-события, чтобы иметь список «зарегистрированных» пользователей, которые связаны с каждым событием. Мне удалось добавить новый столбец joinByArray в модуль apostrophe-events, и он корректно работает при редактировании событий.

Теперь я пытаюсь добавить кнопку «Регистрация» в модуль 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
person Joseph    schedule 25.06.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я ведущий архитектор «Апострофа» на Панк-авеню.

Во-первых, у вас возникли трудности, потому что вы пытаетесь вызвать интерфейсные API-интерфейсы JavaScript, такие как link, из index.js файла вашего модуля, который является внутренним кодом node.js.

Вам нужно будет отправить 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 из своего always.js:

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

Ознакомьтесь с руководством по созданию контактной формы, которое включает в себя материалы о том, как протолкните always.js файл из public/js папки вашего модуля в качестве ресурса и так далее.

В этом руководстве также демонстрируется техника использования настраиваемого типа виджета с апострофом для размещения исходного кода вашего внешнего интерфейса, что я обычно рекомендую. Это дает вам доступ к self.api и так далее.

person Tom Boutell    schedule 26.06.2017