添加更多链接到meteor-accounts-ui-bootstrap-3的下拉菜单

Question

用户使用meteor-accounts-ui-bootstrap-3包登录网站后，{{loginButtons}}创建的下拉列表会显示2个按钮。

我们如何在下拉菜单中添加更多按钮？

Answer 1

您需要自定义包。它应该在项目的packages/目录中。控制此下拉列表的文件为login_buttons_dropdown.html。

请注意，运行mrt update可能会影响您对陨石包的更改。您可能希望将包文件夹重命名为accounts-ui-bootstrap-3-custom/，执行mrt remove accounts-ui-bootstrap-3，然后mrt add accounts-ui-bootstrap-3-custom。

Answer 2

当然可以在不编辑包文件的情况下进行添加，例如在运行时注入代码。假设您使用iron：router，您可以在每次页面呈现之前在客户端中注入HTML代码：

var addExtraHTML = function() {
  var user = Meteor.user();
  //check if user is signed in and that desired HTML element does not already exists
  if (user && $('#idOfDesiredHTMLElement').length===0) {
    var newHTML = "<a href='#' class='btn btn-default btn-block' id='idOfDesiredHTMLElement'>Edit Account</a>";
    //Add desired HTML above the change password button
    $('#login-buttons-open-change-password').before(newHTML);
  }
  this.next();
};

Router.onBeforeAction(addExtraHTML); //Injects HTML every time before the page loads

确保给你添加id的内容，以便你可以跟踪已经存在的内容！

Answer 3

自最后一个回答有效以来，Meteor已发生变化。

我开始工作的方法是从accounts-ui包附加下拉模板的onRender事件。

测试： METEOR@1.1.0.3 - accounts-ui-unstyled@1.1.7

Template._loginButtonsLoggedInDropdownActions.onRendered(function() {

  // Validate user exists and YOUR ELEMENT is not already in place
  if (Meteor.user() && $('#YOUR_ELEMENT').length === 0) {

    // Inject YOUR ELEMENT before the 'Change password' button
    $('#login-buttons-open-change-password').before('<div class="login-button" id="YOUR_ELEMENT">YOUR_ELEMENT</div>');

    // EXTRA: Attach an event to YOUR ELEMENT
    $('#login-buttons-open-account-page').on('click', function() {
      // Event Action...
    });
  }
});