Как отобразить шаблон магистрали в HTML <div>, который загружает данные из XML-файла?

0

Я очень новичок в Backbone.js, только начал изучать его. Я внедряю основу на существующей веб-странице. Я создал html div, который отображает содержимое, извлеченное из xml файла. Обычно он работает нормально, но когда я начал отображать его с использованием базового шаблона и просмотра, он не показывает никаких данных на моей странице. Обратите внимание, что написали код jQuery для чтения данных из XML файла и отображения его в html div.So пожалуйста, помогите мне решить мою проблему. До сих пор я делал следующие вещи:

Это мой html, присутствующий в 'index.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>

Ниже приведен код Backbone в том же файле index.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>
Теги:
backbone.js

1 ответ

0
Лучший ответ

Вам необходимо обернуть ваш базовый код в функцию 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) Я добавил return this к вызову render. Это позволяет цепь вызовам с render, как cloudtag.render().el

3) Я добавил текст в теги <a>, вы не увидите их, если у вас нет текста.

Вот рабочая демонстрация с изменениями.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню