javascript - 使用 Backbone.js 获取随下拉菜单变化的段落

Question

我已经让我的下拉菜单中填充了类(class)，但随后我一直在尝试弄清楚如何使用 Backbone.js 根据用户选择的内容来更改下拉菜单下方的文本

我通过添加包含我的类(class)并显示标题的选项来填充选择。现在我只是卡在应该在哪里插入文本，以便它会根据选择而改变。

这是我的 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 文件，我现在想显示标题: [{ "标题": "简介", "text":"现在就做这个" }, { "title": "第二次", "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;
    }
});

Answer 1

首先为每节课提供一个id。

window.LessonView = Backbone.View.extend({
    ...
    render: function() {
        var renderedContent = this.template(this.model.toJSON());
        $(this.el).html(renderedContent);

        // Then put the id as the option's value
        $(this.el).val(this.model.get('id'));

        return this;
    }
    ...
});

window.LibraryView = Backbone.View.extend({
    ...
    // bind the select's onchange event to this.onSelect
    events: {
        'change select': 'onSelect'
    },
    ...

    ...
    onSelect: function(e) {
        // Grab the id of the select lesson
        var lessonId = $(e.target).val();

        // And get the lesson data back
        var lesson = _.indexBy(this.collection.toJSON(), 'id')[lessonId];

        // Then you could render you lesson view with something like this :
        $('#target-container').html(
            _.template($('#lesson-template').html(), lesson)
        );

    },
    ...

});

您也可以选择更复杂的 View /集合构造，但我建议您首先完成此工作。