用setElement可欣赏骨干 [英] using setElement with views in backbone

问题描述

教程去不错，但我决定给它与骨干0.9和新setElement另一个运行命令。

 ＆LT;脚本类型=文/ JavaScript的ID =测试＆GT;
    搜索查看= Backbone.View.extend（{
        初始化：功能（）{
            this.render（）;
        }，
        渲染：功能（）{
            变种模板= _.template（$（＃search_template）的HTML（），{}）;     //就在这儿            this.setElement（模板）;        }，
        事件：{
            点击输入[类型=按钮]：doSearch
        }，
            警报（搜索+ $（＃SEARCH_INPUT）VAL（））;
        }
    }）;    VAR search_view =新的搜索查看（{EL：$（＃search_container）}）;
＆LT; / SCRIPT＆GT;
 

previously，我用 this.el.html（模板），但我如何使用新的setElement命令？

我有什么目前无法正常工作，应该出现的搜索字段没有。

解决方案

从Backbone.js的V0.9文档：

setElement

  view.setElement（元素）
 

  

如果你想一个骨干视图适用于不同的DOM元素，使用setElement，这也将创造缓存$ EL参考，并从旧元素移动视图的下放事件到新的。

的骨干查看厄尔尼诺的属性重新presents将实际呈现在页面视图的HTML部分。为了得到实际呈现的页面视图需要将其添加为一个新的元素在页面或附加它INT页面中的现有元素的看法。

使用code你以前工作的原因是因为你设置视图的厄尔尼诺的属性在构造函数中附加到现有元素以search_container一个id：

  VAR search_view =新的搜索查看（{EL：$（＃search_container）}）;
 

您之前使用的方法：

  $（this.el）的.html（模板）;
 

工作，因为你将你的模板的HTML页面上的现有元素。

当您使用setElement以下列方式：

  this.setElement（模板）;
 

您实际上是从search_container到您的模板的HTML的ID的元素覆盖现有值厄尔尼诺。而且，由于您的模板还没有被添加到页面或不存在您的视图将不显示。

如果你想仍然使用setElement，并继续将其连接到id为search_container，我把它叫做当你初始化你的看法：

 初始化：功能（）{
  this.setElement（this.el）;
  this.render（）;
}
 

这种方式可以缓存$报引用后，像这样：

 渲染：功能（）{
  变种模板= _.template（$（＃search_template）的HTML（），{}）;
  这$ el.html（模板）;
}
 

希望这有助于！

Following this tutorial went okay but I decided to give it another run with backbone 0.9 and the new setElement command.

<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>

Previously, I used this.el.html(template), but how do I use the new setElement command?

What I have there currently doesn't work, the search field that should appear does not.

解决方案

From the Backbone.js v0.9 documentation:

setElement

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.

The Backbone View "el" property represents the html portion of the view that will actually be rendered to the page. To get the view to actually render to the page your view will need to add it as a new element in the page or attach it to an existing element int the page.

The reason the code you used before worked was because you were setting the "el" property for the view in the constructor to attach to an existing element with an id of "search_container":

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

The method you used before:

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

worked because you were adding your template html to the existing element on the page.

When you used setElement in the following way:

this.setElement( template );

you were actually overriding your existing value for "el" from the element with id of "search_container" to the html of your template. And since your template has not been added to the page or doesn't already exist your view will not display.

If you want to still use setElement and continue attaching it to the id "search_container", I would call it when you initialize your view:

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

This way you can cached "$el" reference later, like so:

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

Hope this helps!

这篇关于用setElement可欣赏骨干的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！