如何避免在骨干空div模板包装？ [英] How to avoid template wrapping with empty div in Backbone?

问题描述

在创建视图骨干创建空div容器，如果EL未设置。模板（这一点。$ el.html（this.template（this.model.toJSON（））））插在该专区。如何避免这种包装？我需要干净的模板，没有任何包装，所以我可以将它插入的任何地方我想要什么？这不是合理的调用工作视图。$ e.children（）与许多元素。

 ＆LT;脚本ID =contactTemplateTYPE =text / html的＆GT;
                ＆LT; D​​IV CLASS =工作＆GT;
                    ＆LT; H1＆GT;＆LT;％=标题％GT; /＆LT;％=类型％GT;＆LT; / H1＆GT;
                    ＆LT; D​​IV＆GT;＆LT;％=描述％GT;＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;VAR工作视图= Backbone.View.extend（{
        模板：_模板（$（＃contactTemplate）HTML（）），        初始化：功能（）{
            this.render（）;
        }，
        渲染：功能（）{
            这$ el.html（this.template（this.model.toJSON（）））;
            返回此;
        }
}）;VAR工作视图=新的工作视图（{
   型号：jobModel
}）;的console.log（jobView.el）;
 

解决方案

我认为真正的回答这个问题还没有提供呢，简单地删除 DIV 从模板，并添加的className 属性工作视图！这将导致在标记您所需要：

模板：

 ＆LT;脚本ID =contactTemplateTYPE =text / html的＆GT;
     ＆LT; H1＆GT;＆LT;％=标题％GT; /＆LT;％=类型％GT;＆LT; / H1＆GT;
     ＆LT; D​​IV＆GT;＆LT;％=描述％GT;＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;
 

视图：

  VAR工作视图= Backbone.View.extend（{
            产品类别：'工作'，//这个类将被添加到包装DIV当你渲染视图            模板：_模板（$（＃contactTemplate）HTML（）），            初始化：功能（）{
                this.render（）;
            }，
            渲染：功能（）{
                这$ el.html（this.template（this.model.toJSON（）））;
                返回此;
            }
    }）;
 

当你调用渲染你最终会与所需的标记：

 ＆LT; D​​IV CLASS =工作＆GT;
  ＆LT; H1＆GT;＆LT;％=标题％GT; /＆LT;％=类型％GT;＆LT; / H1＆GT;
  ＆LT; D​​IV＆GT;＆LT;％=描述％GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

When I create view backbone creates empty div-container if el is not set. Template (this.$el.html(this.template(this.model.toJSON()))) inserted in that div. How to avoid this wrapper? I need clean template without any wrappers so I can insert it anywhere I want? It's not reasonable to call jobView.$e.children() with many elements.

<script id="contactTemplate" type="text/html">
                <div class="job">
                    <h1><%= title %>/<%= type %></h1>
                    <div><%= description %></div>
                </div>     
</script>     

var JobView = Backbone.View.extend({
        template:_.template($("#contactTemplate").html()),

        initialize:function () {
            this.render();
        },
        render:function () {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }
});

var jobView = new JobView({
   model:jobModel
});          

console.log(jobView.el);

解决方案

I think the real answer to this question has not been provided yet, simply remove the div from the template and add the className property to JobView! This will result in the markup you require:

The template:

<script id="contactTemplate" type="text/html">
     <h1><%= title %>/<%= type %></h1>
     <div><%= description %></div>
</script>

The view:

var JobView = Backbone.View.extend({
            className: 'job', // this class will be added to the wrapping div when you render the view

            template:_.template($("#contactTemplate").html()),

            initialize:function () {
                this.render();
            },
            render:function () {
                this.$el.html(this.template(this.model.toJSON()));
                return this;
            }
    });

When you call render you will end up with the desired markup:

<div class="job">
  <h1><%= title %>/<%= type %></h1>
  <div><%= description %></div>
</div>

这篇关于如何避免在骨干空div模板包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！