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。

通过骨干视图渲染模板html

1 个答案: