Я очень новичок в 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>
Вам необходимо обернуть ваш базовый код в функцию 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>
, вы не увидите их, если у вас нет текста.
Вот рабочая демонстрация с изменениями.