ドロップダウンにレッスンが入力されるようになりましたが、Backbone.js を使用してユーザーが選択した内容に基づいて、ドロップダウンの下のテキストを変更する方法を見つけようとして立ち往生しています。
レッスンを含むオプションを追加し、タイトルを表示することで、選択を設定しています。今、選択に基づいて変更されるように、テキストをどこに挿入する必要があるのか に固執しています。
ここに私のHTMLがあります:
<script type="text/template" id="lesson-template">
<span class="lesson-title"><%= title %></span>
//How should I insert the text?
</script>
<script type="text/template" id="library-template">
<h1> Lesson Library </h1>
<select class="lessons"></select>
</script>
情報を取得する JSON ファイルは次のとおりです。ここでタイトルを表示します: [{ "title": "Intro", "text":"Do this now" }, { "title": "Second"," text":"そしてこれ" }]
これは私のjavascriptファイルに含まれているものです:
window.Lesson = Backbone.Model.extend({});
window.Lessons = Backbone.Collection.extend({
model: Lesson,
url: './lessons.json'
});
window.library = new Lessons();
window.LessonView = Backbone.View.extend({
tagName: 'option',
className: 'lesson',
initialize: function() {
_.bindAll(this,'render');
this.model.bind('change',this.render);
this.template = _.template($('#lesson-template').html());
},
render: function() {
var renderedContent = this.template(this.model.toJSON());
$(this.el).html(renderedContent);
return this;
}
});
window.LibraryLessonView = LessonView.extend({
});
window.LibraryView = Backbone.View.extend({
tagName: 'section',
className: 'library',
initialize: function() {
_.bindAll(this, 'render');
this.template = _.template($('#library-template').html());
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 LibraryLessonView({
model: lesson,
collection: collection
});
$lessons.append(view.render().el);
});
return this;
}
});