Hinzufügen eines Links für Button Aktion

Question

Ich habe vor kurzem eine neue Site mit Apostrophe CMS gestartet, und eine der Funktionen im Projekt wird Apostroph-Events erweitern, um eine Liste von "registrierten" Benutzern zu haben, die jedem Event zugeordnet sind. Ich konnte eine neue JoinByArray-Spalte zum Apostroph-Ereignis-Modul hinzufügen, und es funktioniert ordnungsgemäß beim Bearbeiten von Ereignissen.

Jetzt versuche ich, eine Register-Schaltfläche zum Apostroph-Ereignisse-Seiten-Modul hinzuzufügen, so dass Benutzer für das Ereignis von jeder Ereignisseite registrieren können. Ich habe zur Zeit einen Arbeits API-Endpunkt zur Verfügung, die ich mit diesem Code erstellt:

(in der Datei lib/modules/Apostroph-events-Seiten/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' }); 
     }); 
    } 
}; 

Das Endpunkt wie erwartet funktioniert, aber ich bin dran, eine Schaltfläche mit einem Link zur richtigen Aktion am Frontend hinzuzufügen. Ich habe eine Schaltfläche, die korrekt in der show.html sieht überschreiben, dass ich erstellt, mit dem folgenden Code:

(In lib/modules/Apostroph-events-Seiten/views/show.html)

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

Ich bin mir nicht sicher, wie ich einen Link zur Registrierung hinzufügen kann. Ich habe versucht, diesen Code auf die gleiche index.js Datei hinzufügen, wie oben:

(In lib/modules/Apostroph-events-Seiten/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); 
}; 

Aber wenn ich die Event-Seite zuzugreifen, Es tritt ein Fehler auf, der besagt, dass self.link keine Funktion ist. Sollte ich den Link-Code an anderer Stelle setzen?

Danke!

Answer 1

Ich bin der leitende Architekt von Apostrophe in der P'unk Avenue.

Zunächst haben Sie Schwierigkeiten, weil Sie versuchen, Frontend-JavaScript-APIs wie link aus der Datei index.js Ihres Moduls aufzurufen, die Back-End-Code node.js ist.

Sie müssen eine always.js Javascript-Datei an den Browser senden. Sie können dies in index.js Ihr Modul nennen:

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

Dann public/js/always.js Datei mit Ihrem Frontend-Code Ihres Moduls füllen.

Zweitens ist der self.link Code, den Sie wahrscheinlich betrachten, wirklich nur für etwas gedacht, das "im Kontext" ist, zum Beispiel zu einem bestimmten Dialogfeld. Sie möchten an jeden Klick auf eine Schaltfläche mit einem bestimmten Datenattribut binden. Dafür könnten Sie schreiben:

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

In Ihrem always.js, und dieser Code wird alles mit einer Aktion reagiert register-event genannt:

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

Aber das ist nur eine bequeme Möglichkeit, ein schreiben jQuery delegierter Event-Handler. Sie könnten auch einfach schreiben:

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

Sie sollten Ihre immer wickeln.js Code in einem DOM-Ready-Funktion:

$(function() { ... }) 

Was self.api nennen, das ist ziemlich bequem, und Sie können in aussehen Subklassifizieren apostrophe-context Zugriff darauf zu bekommen, aber Sie können auch bauen einfach die URL selbst und rufen Sie unsere jsonCall jQuery-Plugin von Ihrem always.js:

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

Bitte beachten Sie auch das Tutorial building a contact form, das Material darüber enthält, wie eine always.js Datei aus dem public/js Ordner Ihres Moduls als Vermögenswert schieben und so weiter.

Dieses Tutorial zeigt auch die Technik der Verwendung eines benutzerdefinierten Apostroph-Widget-Typs, um Ihrem Frontend-Code eine Heimat zu bieten, die ich im Allgemeinen empfehle. Es gibt Ihnen Zugriff auf self.api und so weiter.