javascript - 在主干 View 中使用 setElement

Question

已关注 this教程进行得很顺利，但我决定使用 Backbone 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 命令？

我目前的功能不起作用，应该出现的搜索字段不起作用。

Answer 1

来自 Backbone.js v0.9 文档:

设置元素

view.setElement(element) 

If you'd like to apply a Backbone view to a different DOM element, use setElement, which will also create the cached $el reference and move the view's delegated events from the old element to the new one.

主干 View “el”属性表示实际将呈现到页面的 View 的 html 部分。要使 View 实际呈现到页面，您的 View 需要将其添加为页面中的新元素或将其附加到页面中的现有元素。

您之前使用的代码之所以有效，是因为您在构造函数中为 View 设置了“el”属性，以附加到 id 为“search_container”的现有元素:

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

您之前使用的方法:

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

之所以有效，是因为您将模板 html 添加到页面上的现有元素。

当您按以下方式使用 setElement 时:

this.setElement( template );

您实际上将“el”的现有值从 id 为“search_container”的元素覆盖到模板的 html 中。由于您的模板尚未添加到页面或尚不存在，因此您的 View 将不会显示。

如果您想仍然使用 setElement 并继续将其附加到 id“search_container”，我会在初始化 View 时调用它:

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

这样您就可以稍后缓存“$el”引用，如下所示:

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

希望这有帮助!