Использование setElement с представлениями в позвоночнике

После этот учебник прошел нормально, но я решил дать ему еще один прогон с магистральной сетью 0.9 и новой командой setElement.

<script type="text/javascript" id = "test" >
    SearchView = Backbone.View.extend({
        initialize: function(){ 
            this.render();
        },
        render: function(){
            var template = _.template( $("#search_template").html(), {} );

     //Right here

            this.setElement( template );

        },
        events: {
            "click input[type=button]": "doSearch"
        },
            alert( "Search for " + $("#search_input").val() );
        }
    });

    var search_view = new SearchView({ el: $("#search_container") });
</script>

Раньше я использовал this.el.html(template), но как использовать новую команду setElement?

То, что у меня там в настоящее время не работает, поле поиска, которое должно появиться, не работает.

Ответ 1

Из документации Backbone.js v0.9:

SetElement

view.setElement(element)

Если вы хотите применить представление Backbone к другому элементу DOM, используйте setElement, который также создаст ссылку кэширования $el и перенесет делегированные представления вида от старого элемента к новому.

Свойство "elb" в Backbone View представляет собой часть html представления, которая будет фактически отображаться на странице. Чтобы получить представление для рендеринга на страницу, вашему представлению нужно будет добавить его как новый элемент на странице или прикрепить его к существующему элементу на странице.

Причина, по которой код, который вы использовали до начала работы, состоял в том, что вы устанавливали свойство "el" для представления в конструкторе для присоединения к существующему элементу с идентификатором "search_container" :

var search_view = new SearchView({ el: $("#search_container") });

Используемый метод:

$(this.el).html(template);

работал, потому что вы добавляли свой шаблон html к существующему элементу на странице.

Когда вы использовали setElement следующим образом:

this.setElement( template );

вы фактически переопределили существующее значение для "el" из элемента с идентификатором "search_container" в html вашего шаблона. А поскольку ваш шаблон не был добавлен на страницу или еще не существует, ваше представление не будет отображаться.

Если вы хотите по-прежнему использовать setElement и продолжать прикреплять его к id "search_container" , я бы назвал его, когда вы инициализируете свое представление:

initialize: function(){ 
  this.setElement( this.el );
  this.render();
}

Таким образом вы можете кэшировать ссылку "$ el" позже, например:

render: function(){
  var template = _.template( $("#search_template").html(), {} );
  this.$el.html(template);
}

Надеюсь, это поможет!