Javascript 如何在html中显示主干模板<；部门>；哪个从xml文件加载数据？

我对Backbone.js是个新手，刚刚开始学习它。我正在现有网页中实现主干网。我已经创建了一个html div，它显示从xml文件获取的内容。正常情况下，它工作正常，但当我开始使用主干模板和视图显示它时，它不会在我的页面上显示任何数据。请注意，我已经编写了一个jQuery代码，从xml文件读取数据并在html div中显示。因此，请帮我解决我的问题。到目前为止，我做了以下几件事：

这是我在'index.html'中的html：

<!--    start Cloud section-->
    <center>
    <section id="clouds">
        <div class="container" style="margin-top:0px;">
            <div class="row">
                  <div class="col-lg-12 "style="background:white">
                                                <div id="side">
                                                        <div class="tags">

                                                        </div><!--/tags-->
                                                   </div><!--/side-->


                   </div><!--/col-lg-12-->     
             </div><!--/row-->
        </div><!--/container-->
    </section><!--/Cloudtags-->
    </center>


<!--------- end of cloud tags ----------->

（注意，我已经在我的文件中添加了所有主干依赖项，即jQuery.js、backbone.js和unerscore.js） 以下是同一文件中的模板，应在其中加载内容：

<script type="text/template" id="cloudtag_tempalte">
     <center>
            <ul class="cld" ">
            <li   >     <a  class="tag1" id="t1"  href="https://www.google.com" target="_blank"></a>  </li> 
            <li  >      <a  class="tag2" id="t2"  href="#"></a>     </li>
            <li  >      <a class="tag3"  id="t3"  href="#"></a>     </li>
            <li  >      <a  class="tag2" id="t4"  href="#"></a>      </li>
            <li  >      <a  class="tag4" id="t5"  href="#"></a>       </li>
            <li  >      <a  class="tag1" id="t6"  href="#"></a>       </li>
            <li  >      <a  class="tag1" id="t7"  href="#"></a>      </li>
            <li  >      <a  class="tag5"id="t8"  href="#"></a>      </li>
            <li  >      <a  class="tag2"id="t9"  href="#"></a></li>
            <li  >      <a  class="tag1"id="t10" href="#"></a></li>
            <li  >      <a  class="tag3"id="t11" href="#"></a></li>
            <li  >      <a  class="tag4"id="t12" href="#"> </a></li>
            <li  >      <a  class="tag1"id="t13" href="#"></a></li>
            <li  >      <a  class="tag5"id="t14" href="#"></a></li>
            <li  >      <a  class="tag1"id="t15" href="#"></a></li>
            <li  >      <a  class="tag2"id="t16" href="#"></a></li>
            <li  >      <a  class="tag1"id="t17" href="https://www.google.com"></a></li> 
            <li  >      <a  class="tag2" id="t18" href="#"></a></li>
            <li  >      <a  class="tag3"id="t19" href="#"></a></li>
            <li  >      <a  class="tag2"id="t20" href="#"></a></li>
            <li  >      <a  class="tag4"id="t21" href="#"></a></li>
            <li  >      <a  class="tag1"id="t22" href="#"></a></li>
            <li  >      <a  class="tag1"id="t23" href="#"></a></li>
            <li  >      <a  class="tag5"id="t24" href="#"></a></li>
            <li  >      <a  class="tag2"id="t25" href="#"></a></li>
            <li  >      <a  class="tag1"id="t26" href="#"></a></li>
            <li  >      <a  class="tag5"id="t27" href="#"></a></li>
            <li  >      <a  class="tag3"id="t28" href="#"> </a></li>
            <li  >      <a  class="tag1"id="t29" href="#"></a></li>
            <li  >      <a  class="tag3"id="t30" href="#"></a></li>
            <li  >      <a  class="tag1"id="t31" href="#"></a></li>
            <li  >      <a  class="tag4"id="t32" href="#"></a></li>
            <li  >      <a  class="tag1"id="t33" href="#"></a></li>
            <li  >      <a  class="tag5"id="t34" href="#"></a></li>
            <li  >      <a  class="tag2"id="t35" href="#"></a></li>

            </ul><!--/cld-->
     </center>
    </script>       

您需要在函数中包装主干代码

将
el
传递给视图时，该元素需要位于
DOM
中。如果没有
document.ready（）
则代码在加载
DOM
之前执行，因此调用以下行时没有
.tags
元素：

var cloudtag=new cld_view({el:$(".tags")});

以下是一些工作代码：

<script type="text/javascript">

  // Run this code with the DOM is loaded
  $(function() {
    var cld_view=Backbone.View.extend({
      render: function(){
        console.log("in render of cldview");
        var template = _.template( $("#cloudtag_tempalte").html(), {} );
        this.$el.html( template );        
        return this;
      }
    });

    var cloudtag=new cld_view({el:'.tags'});
    cloudtag.render();

  });


//在加载DOM时运行此代码
$（函数（）{
var cld_view=Backbone.view.extend({
render:function（）{
console.log（“在cldview的呈现中”）；
var template=35;.template（$（“#cloudtag_tempalte”）.html（），{}）；
这个.$el.html（模板）；
归还这个；
}
});
var cloudtag=newcld_视图（{el:'.tags'}）；
cloudtag.render（）；
});

其他一些变化：

1） 您可以将
el
作为
{el:'.tags'}
而不是
{el:$（“.tags”）}
传递

2） 我添加了
将此
返回到
渲染
调用。这允许您将调用与
render
like
cloudtag.render（）.el

3） 我在你的
中添加了文本，并进行了更改

<script type="text/javascript">

  // Run this code with the DOM is loaded
  $(function() {
    var cld_view=Backbone.View.extend({
      render: function(){
        console.log("in render of cldview");
        var template = _.template( $("#cloudtag_tempalte").html(), {} );
        this.$el.html( template );        
        return this;
      }
    });

    var cloudtag=new cld_view({el:'.tags'});
    cloudtag.render();

  });