Emberjs outlet внутри загрузочного окна

Question

Я использую bootstrap popover в своем приложении, и мне нужно отобразить в нем розетку.

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

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. Если я не закрою и не открою всплывающее окно, я вижу модификацию.

Возможно ли вывести розетку непосредственно внутри кода? или можно ли обновить мой popover?

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

Answer 1

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

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

первый, измените вызов функции поповера всегда создавать этот заполнитель DIV:

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

дальше, отделите DIV контента из йот в 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 сразу же отключается, когда вызывается invInsertElement, вы можете удалить класс c hide из содержимого div.

Редактировать: я попробовал это в своем собственном проекте, и он сломал двустороннюю привязку. контроллер обновил мои элементы handlebars, но любые помощники с двумя ссылками {{input}} не обновили контроллер/модель. я в конечном итоге с помощью выпадающего меню одного пункта, и использовал это, чтобы предотвратить меню от закрытия слишком быстро: Twitter Bootstrap - Avoid dropdown menu close on click inside

Answer 2

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

Bootstrap Popovers with ember.js template

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