如何在从 xml 文件加载数据的 html

How to display a backbone template in a html <div> which loads the data from xml file?

本文关键字：加载 数据 html 文件 xml      更新时间：2023-09-26
中显示主干模板。

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

这是我在"索引.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>

以下是同一索引.html文件中的骨干代码：

   <script type="text/javascript">
    var cld_view=Backbone.View.extend({
        initialize: function(){
        },
        render: function(){
            // Compile the template using underscore
            var template = _.template( $("#cloudtag_tempalte").html(), {} );
            // Load the compiled HTML into the Backbone "el"
            this.$el.html( template );
            alert("in render of cldview");
        }
    });
    var cloudtag=new cld_view({el:$(".tags")});
    cloudtag.render();

</script>

你需要将主干代码包装在document.ready（）函数中。

将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();
  });

其他一些更改：

1）您可以将el作为{el:'.tags'}传递，而不是{el:$(".tags")}。

2）我在render通话中添加了return this。这允许您将呼叫与 render喜欢cloudtag.render().el

3）我在您的<a>标签中添加了文本，如果您那里没有任何文本，您将不会看到它们显示。

这是包含更改的工作演示。

相关文章：