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文档：

setElement

view.setElement(element)

如果您想将Backbone视图应用于其他DOM元素，请使用setElement，它还将创建缓存的$ el引用，并将视图的委托事件从旧元素移动到新元素。

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

您之前使用的代码之所以是因为您在构造函数中为视图设置了“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。由于您的模板尚未添加到页面中或尚未存在，因此您的视图将无法显示。

如果您仍想使用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);
}

希望这有帮助！

在主干中使用带有视图的setElement

1 个答案:

setElement