0

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

（请注意，我已在我的文件 iejQuery.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>

以下是同一个 index.html 文件中 Backbone 的代码：

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

1 回答 1

0

您需要将主干代码包装在document.ready()函数中。

当您将 an 传递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）您可以通过elas{el:'.tags'}而不是{el:$(".tags")}.

2）我加入return this了render通话。这允许您使用 renderlike链接调用cloudtag.render().el

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

这是带有更改的工作演示。

于 2013-11-09T19:34:14.213 回答