通过主干视图呈现模板 html

Question

我有一个包含 3 步向导的简单页面。基本上，用户填写一个文本框，单击下一步，加载下一个表单字段。

我已经在模板中设置了所有 HTML 并在主干视图中使用该模板。

问题是，主干没有在模板内呈现 HTML。我只是得到一个空白屏幕。

这是我的模板：

<script type="text/template" id="assessmentTitleTemplate">

    <div id="titleDiv">
        <label for="title">Title:</label> &nbsp;&nbsp;<input type="text" />
    </div>

    <div id="choicesDiv" style="display: none;">
        <label for="choices">Choices:</label><input type="text" />
    </div>

    <div id="typeDiv" style="display: none;">
        <label for="types">Types:</label>
        <select name="type">
            <option>red</option>
            <option>blue</option>
            <option>green</option>
        </select>
    </div>

   <div id="directionControl">       
        <input type="button" value="Prev" /> &nbsp;&nbsp;<input type="button" value="Next" />
    </div>

</script>

这是我的主干 javascript 代码：

"use strict";

var titleView = Backbone.View.extend({
    tagName: 'div',
    className: 'title',
    template: _.template($('#assessmentTitleTemplate').html()),

    events: {
        'click .next': 'saveProceedNext',
        'click .prev': 'ProceedPrev'

    },

    initialize: function () {
        this.render;
    },

    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    saveProceedNext: function() {
        this.$('#titleDiv').hide();
        this.$('#choicesDiv').show();
    },

    ProceedPrev: function() {
    }
});

Answer 1

您的代码是正确的，但您的 initialize 正文中缺少几个括号：

initialize : function () {
    this.render();  // it was this.render; before
}

您的代码没有调用该函数。

此外，您的按钮缺少class 标记，否则单击时它们将不起作用。添加这将使它们工作：

<input type="button" value="Prev" class="prev" /> &nbsp;&nbsp;<input type="button" value="Next" class="next" />

检查这个JSFiddle。