Правильный способ вставить представление с помощью Backbone.js - PullRequest
Новая
       33

Правильный способ вставить представление с помощью Backbone.js

1 голос
/ 24 февраля 2011

У меня есть простое приложение backbone.js. Я хочу визуализировать представление в DOM HTML-страницы, это представление детали для модели. Моя HTML-страница уже содержит элемент DIV, в который я хочу визуализировать представление. Если я попытаюсь отобразить мой вид так: 

detailView = new RulesPanelView({model : @model})
$("#detail").html(detailView.render().el)

Сбой, и я вставляю [Object HTMLDivElement] в DOM, а не в мой отрендеренный HTML.

Это единственный способ заставить его работать, и это похоже на взлом: 

$("#detail").html('')
detailView = new RulesPanelView({model : @model})
$("#detail").append(detailView.render().el)

Необходимо очистить HTML-код DIV перед рендерингом, чтобы не отображать несколько представлений внутри #detail, что и происходит с добавлением.

Кроме того, разве я не создаю слишком много представлений таким образом, просто кажется более чистым заменить HTML, как в первом сегменте кода?

Как правильно отобразить это представление?

Ответы [ 2 ]

6 голосов
/ 24 февраля 2011

То, что вы хотите, это передать уже вставленный DOM-узел представлению в виде опции 'el' для конструктора: 

new RulesPanelView({el: $("#detail")});

Таким образом, он не будет отображаться снова.Тем не менее, вам все равно нужно убедиться, что метод 'визуализации' вашего представления сможет отобразить правильный вид из обновленной модели.

В базовой документации это упоминается как хороший способ избежатьрендеринг слишком большого количества материала за раз.

1 голос
/ 18 марта 2011

Я фактически добавляю в render метод представления. Это не работает, если вы хотите выполнить рендеринг при смене модели, но для этого я добавил refresh метод, который визуализирует вызовы перед добавлением. Затем я связываю обновление с изменением модели (если мне это нужно). Итак, на мой взгляд, я делаю это: 

render: function(){
    var markup = this.refresh();
    $(markup).appendTo('#some-selector');
    return this;
}, 
refresh: function(){
    return $(this.el).html($.mustache(this.template, this.model.toJSON()));
},

Не уверен, что это "лучший", но я думаю, что он работает довольно хорошо. Я также видел, где у вас есть коллекция, привязанная к представлению, которое проходит по всем моделям и отображает «подвиды» представления коллекции - это обеспечивает более приятный программный подход, чем жесткое программирование, когда вы собираетесь добавить .

...