的按鈕操作

Question

添加鏈接最近，我開始一個新的網站有撇號的CMS，並在項目的特點之一將被延長撇號的事件將有誰與每個事件相關的「註冊」用戶的列表。我能夠在撇號事件模塊中添加一個新的joinByArray列，並且在編輯事件時它可以正常工作。

現在，我想一個註冊按鈕添加到撇號事件的頁面模塊，使用戶可以從每個事件的頁面註冊事件。我現在有一個可用的工作API端點，這是我使用此代碼創建：

（在文件lib/modules目錄/撇號事件 - 頁/ 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目錄/撇號事件 - 網頁/視圖/ show.html）

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

我不知道如何添加註冊操作的鏈接。我試圖將此代碼添加到同一個文件index.js如上：

（在lib/modules目錄/撇號事件 - 頁/ 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'unk大道的撇號首席建築師。

首先，您遇到困難是因爲您嘗試調用模塊的index.js文件（即後端node.js代碼）中的前端JavaScript API（如link）。

您需要將一個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() { ... }) 

你應該總是包裹你。在DOM就緒功能JS代碼：

$(function() { ... }) 

至於調用self.api，這是非常方便的，你可以看看子類apostrophe-context來訪問它，但你也可以直接建立自己的URL並且調用我們的從always.jsjsonCall jQuery插件：

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

請查看教程building a contact form，其中包括有關如何從模塊的public/js文件夾推送always.js文件作爲資產等材料。

該教程還演示了使用自定義撇號小部件類型爲您的前端代碼提供主頁的技術，我通常會推薦這種技術。它使您可以訪問self.api等。