[英]Backbone Template not Showing up in html.erb files for Ruby on Rails
我正在嘗試將HTML文件移動到html.erb文件中,但是在使用Backbone.js時遇到問題。
自從Ruby使用以來,我最初對<%和<%=標簽有問題,但是我將underscore.js文件更改為
_.templateSettings = {
interpolate : /\{\{=(.+?)\}\}/g,
escape : /\{\{-(.+?)\}\}/g,
evaluate: /\{\{(.+?)\}\}/g
};
而不是默認值。 現在,我不確定為什么我的內容沒有顯示在html.erb文件中。 我收到錯誤消息:Backbone.history已經啟動
這是我的html.erb文件:
<%= javascript_include_tag "Lessons.js"%>
<script type="text/template" id="main-lesson-template">
<!-- Note: Lesson (lesson name) -->
<button class="btn btn-danger" style="width: 100%" id="Lesson {{= title }}">{{= title }}</button>
{{ _.each(sublessons, function(sublesson) { }}
<button class="btn btn-warning {{= title }}" style="opacity: 0.85; -moz-opacity: 0.85; -webkit-opacity: 0.85; list-style: none; width: 100%; display: none;">{{= sublesson.title }}</button>
{{ }); }}
</script>
<script type="application/javascript">
jQuery(function(){
window.library.fetch();
});
</script>
<script type="text/template" id="library-template">
<div id="left-container" style="float: left; left: -170px">
<ul class="lessons" style="width: 180px; padding-left: 0px;"></ul>
</div>
<script>
$('#left-container').css('position', 'relative').mouseover(function() {
$(this).stop(true).animate({'left': '0px'}, 1000);
}).mouseout(function() {
$(this).stop(true).animate({'left': '-170px'}, 1000);
});
</script>
</script>
<%= javascript_include_tag "Lessons.js"%>
可能是我的javascript文件:
window.Lessons = Backbone.Collection.extend({
model: Lesson,
url: './lessons.json'
});
window.library = new Lessons();
$(document).ready(function() {
window.LessonView = Backbone.View.extend({
tagName: 'div',
className: 'lesson',
template: _.template($('#main-lesson-template').html()),
initialize: function() {
_.bindAll(this,'render');
},
render: function() {
var renderedContent = this.template(this.model.toJSON());
$(this.el).html(renderedContent);
return this;
}
});
window.SubLessonView = Backbone.View.extend({
tagName: 'div',
className: 'sub-lesson',
template: _.template($('#main-lesson-template').html()),
initialize: function() {
_bindAll(this, 'render');
},
render: function() {
var renderedContent = this.template(this.model.toJSON());
$(this.el).html(renderedContent);
return this;
}
});
window.LibraryView = Backbone.View.extend({
tagName: 'section',
template: _.template($('#library-template').html()),
events: {
'click .btn.btn-danger': 'showSubLessons',
'click .btn.btn-warning': 'showLessonContent'
},
initialize: function() {
_.bindAll(this, 'render',
'showSubLessons');
this.collection.bind('reset', this.render);
},
render: function() {
var $lessons
collection = this.collection;
$(this.el).html(this.template({}));
$lessons = this.$('.lessons');
this.collection.each(function(lesson) {
var view = new LessonView({
model: lesson,
collection: collection
});
$lessons.append(view.render().el);
//Add all content to the content container
for(var i = 0; i < view.model.attributes.sublessons.length; ++i) {
$('#content').append("<div id='" + view.model.attributes.sublessons[i].title + " Content' style='display: none'>" + view.model.attributes.sublessons[i].text + "</div>");
}
});
var $container = $('#container');
$container.append(this.el);
},
而我的路由器:
window.BackboneLessons = Backbone.Router.extend({
routes: {
'':'home'
},
initialize: function() {
this.libraryView = new LibraryView({
collection: window.library
});
},
home: function(){
this.libraryView.render();
}
});
window.App = new BackboneLessons();
Backbone.history.start(); //offending line
});
我已經將我的jsavascript文件鏈接了兩次,這就是為什么兩次調用Backbone.history.start的原因。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.