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

用户使用

meteor-accounts-ui-bootstrap-3

包登录到站点后，由

{{loginButtons}}

创建的下拉列表显示2个按钮

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

---

您需要自定义软件包。它应该在项目的

packages/

目录中。控制此下拉列表的文件是

---

请注意，运行

mrt update

可能会影响您对meteorite软件包的更改。您可能希望将包文件夹重命名为类似于

accounts-ui-bootstrap-3-custom/

，执行

mrt remove accounts-ui-bootstrap-3

，然后

mrt add accounts-ui-bootstrap-3-custom

，当然可以在不编辑包文件的情况下进行添加，比如在运行时注入代码。假设您使用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

var addExtraHTML=function（）{
var user=Meteor.user（）；
//检查用户是否已登录并且所需的HTML元素不存在
if（user&&$（'#idofdesiredhtmlement'）。长度==0）{
var newHTML=“”；
//在“更改密码”按钮上方添加所需的HTML
$（“#登录按钮打开更改密码”）。之前（newHTML）；
}
这个。下一个（）；
};
路由器.onBeforeAction（addExtraHTML）//每次在页面加载之前注入HTML

---

确保给你添加的东西一个id，这样你就可以跟踪已经存在的东西了

Meteor自上次答案有效以来已发生变化

我让它工作的方法是从accounts ui包中附加到下拉模板的onRender事件

测试日期： METEOR@1.1.0.3-帐户用户界面-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...
    });
  }
});

Template.\u loginButtonsLoggedInDropdownActions.onRendered（函数（）{
//验证用户是否存在，并且您的元素尚未就位
if（Meteor.user（）&&$（“#您的_元素”）。长度==0{
//在“更改密码”按钮之前插入元素
$（“#登录按钮打开更改密码”）。在（'YOUR#ELEMENT'）之前；
//额外：将事件附加到元素
$（“#登录按钮打开帐户页”）。在（'单击'，函数（）上{
//事件操作。。。
});
}
});

是否可以在不编辑软件包文件的情况下进行添加？就像在运行时注入代码一样。因为它都是javascript，所以实际上可以使用jquery在其中注入额外的标记。是的，您可以轻松地注入所有您想要的新HTML元素。见下面我的答案