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

Question

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

如何向下拉菜单添加更多按钮？

​

​

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包中的dropdown模板的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...
    });
  }
});