0

私はBackbone.jsを学び始めたばかりの初心者です。既存の Web ページにバックボーンを実装しています。xml ファイルから取得したコンテンツを表示する html div を作成しました。通常は正常に動作しますが、バックボーンのテンプレートとビューを使用して表示を開始すると、ページにデータが表示されません.xmlファイルからデータを読み取ってhtml divに表示するjQueryコードを書いたことに注意してください.私の問題を解決するのを手伝ってください。これまで、次のことを行ってきました。

これは、「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.read()関数でラップする必要があります。

ビューにを渡す場合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に呼び出しをチェーンできます rendercloudtag.render().el

3) タグにテキストを追加しまし<a>た。テキストがないと表示されません。

これは、変更を加えたデモです。

于 2013-11-09T19:34:14.213 に答える