Макова: как повторно использовать представление, отображаемое во время загрузки страницы
-
25-10-2019 - |
Вопрос
Я создаю диспетчер URL -адресов, где пользователь может добавить свои любимые URL -адреса веб -страницы в закладки, а затем управлять ими в папках.
- Во время загрузки приложения я рендеринг представления, в котором показан список папок, созданных пользователем. Это представление невидимо при загрузке страницы.
- Затем пользователь переходит на свою домашнюю страницу, чтобы увидеть список URL -адресов
- Оттуда пользователь может организовать URL -адреса в папках
- Пользователь нажимает значок «Переместить в папку» в представлении URL
- Я хочу отобразить Absolute PolderseLectorView Absolute Plowere под знаком «Переместить в папку». Как я могу это сделать?
- Кроме того, если URL уже был перенесен в папку, я хочу, чтобы проверенный знак появился в FotserseLectorView в папке, где был перенесен URL -адрес.
Как мне продолжить сюда?
Вот как я загружаю список папок.
var folderColl = new FolderColl();
new FolderSelectorView({collection: folderColl});
Вот код для представления URL.
URLView = Backbone.View.extend({
tagName: 'li',
template: _.template($('#URLTempalte').html()),
events: {
'click .FolderChange': 'showFolderSelector'
},
initialize: function() {
_.bindAll(this, 'render');
},
render: function() {
return $(this.el).html(this.template(this.model.toJSON()));
},
showFolderSelector: function() {
// How should I display the view here
// view should display below the "Move to folder" icon
// Doing something like `new FolderSelectorView` is not what I'm after
// since that will just re-render the view for every URL displayed
}
});
Решение
Вы можете легко прикрепить обзор к существующему HTML -элементу. Все, что вам нужно сделать, это пройти el
Для представления, в представление, когда вы создаете его. а el
Может быть все, что вы хотите - включая существующий HTML -элемент, найденной через селектор jQuery.
var myEl = $("#someElementOnThePage");
var myView = new MyView({
el: myEl
});
Это прикрепит ваш вид к #someElementOnThePage
Элемент, а затем вы можете использовать его, как будто вы сами его.
Для получения дополнительных примеров см. В своем блоге пост о прогрессивной разработке: http://lostechies.com/derickbailey/2011/09/26/seo-and-ccessionbility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js//