Выход Emberjs внутри всплывающего окна начальной загрузки

Я использую всплывающее окно начальной загрузки в своем приложении, и мне нужно отобразить в нем выход.

У меня есть этот вложенный маршрут:

this.resource('pages', function(){
    this.resource('page', { path: ':id' }, function(){
        this.resource('edit', function(){
            this.resource('images', function(){
                this.resource('image', { path: ':image_id'}, function(){
                    this.route('edit');
                })
            }); 
        }); 
    });
});

Когда пользователь находится здесь => /pages/1/edit/, когда он нажимает на изображение, он направляется к /images, но отображает {{outlet}} внутри всплывающего окна следующим образом:

<div class="popover-content hide">
    {{outlet}}
</div>

Это моя инициализация всплывающего окна:

 $img.popover({
       html: true,
       content: function() { 
       return $('.popover-content').html(); //need to have the outlet here
       }
  });

Пока он правильно отображает мою розетку, но внутри шаблона изображений у меня есть кнопка, которая изменяет DOM, и она не обновляет html. Если я не закрою и снова не открою всплывающее окно, я увижу модификацию.

Можно ли визуализировать розетку прямо внутри кода? или возможно ли обновить мой поповер?

Спасибо за помощь.


ember.js bootstrap-popover
person SuperMarco    schedule 08.01.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

См. эти ссылки для альтернативного подхода к размещению элементов Ember во всплывающих окнах Bootstrap:

Всплывающие окна Bootstrap с шаблоном ember.js

https://cowbell-labs.com/2013-10-20-using-twitter-bootstrap-js-widgets-with-ember.html

person Alexander Taylor    schedule 21.01.2015

arrow_upward
0
arrow_downward

Ember и Handlebars это не нравится, потому что это в основном копирование html-содержимого div и вставка его в другой. Но этот html сам по себе еще не все, что нужно. Эмбер — это волшебство, и на заднем плане происходит множество вещей.

Ваш скрытый div — это настоящий тлеющий материал, так что давайте постараемся не связываться с ним, вызвав для него .html(). Моя идея состоит в том, чтобы вместо этого буквально переместить сам DOM.

во-первых, измените вызов функции popover, чтобы всегда создавать этот div-заполнитель:

content: '<div id="placeholder"></div>',

затем отсоедините div содержимого от dom в didInsertElement представления:

// get the popover content div and remove it from the dom, to be added back later
var content = Ember.$('.popover-content').detach();

// find the element that opens your popover...
var btn = Ember.$('#btn-popup-trigger').get(0);

// ... and whenever the popover is opened by this element being clicked, find the placeholder div and insert the content element
// (this could be improved.  we really just want to know when the popover is opened, not when the button is clicked.)
btn.addEventListener("click", function() {
    content.appendTo("#placeholder");
});

так как содержимое div сразу же отсоединяется при вызове didInsertElement, вы можете удалить «скрытый» класс css из содержимого div.

edit: я попробовал это в своем собственном проекте, и он сломал двустороннюю привязку. контроллер обновил элементы моего руля, но любые помощники с двусторонней привязкой {{input}} не обновили контроллер/модель. в итоге я использовал раскрывающееся меню с одним элементом и использовал его, чтобы предотвратить слишком быстрое закрытие меню: close-on-click-inside">Twitter Bootstrap — избегайте закрытия раскрывающегося меню при нажатии внутри

person Alexander Taylor    schedule 21.01.2015