Добавить ссылки на раскрывающееся меню 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

Это, безусловно, возможно сделать дополнениями без редактирования файлов пакета, таких как ввод кода во время выполнения. Предполагая, что вы используете железо: маршрутизатор, вы можете вводить 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 

Убедитесь, чтобы дать вещи, которые вы добавить идентификатор, так что вы можете следить за то, что уже там!

Answer 3

Метеор изменился с момента последнего ответа.

Способ, которым я получил его, был связан с событием onRender шаблона выпадающего списка из пакета учетных записей ui.

Проверено на: 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... 
    }); 
    } 
});