为什么我的主干视图会将“未定义”置于顶部？

Question

以下视图中的大多数渲染功能都是无关紧要的，我想但是我将其留作完整性。我正在逐步完成工作流程步骤列表，注意根据事物的各种状态切换li的类。

var WorkStepView = Backbone.View.extend({
    className: "workflowStep",

    render: function() {
        var output;
        var arrowPlaced = false;
        var self = this;
        i = 0;
        _.each(this.collection.models, function(s) {
            var post = "";
            var classname = '';
            if (s.attributes["complete"] != 1) {
                if (! arrowPlaced) {
                    classname = "current";
                    if (s.attributes["adminCompletable"] == 1 ) {
                        post = ' - <input onClick="completeStep(' + i + ');" type="button" value="Completed" />';
                    }
                    arrowPlaced = true;
                }
                else {
                    classname = "future";
                }
            }
            else {
                classname = "past";
            }
            output += '<li class="' + classname + '">' +  s.attributes["description"] + post + '</li>';
            i++;
        });
        this.el.innerHTML = output;
        return this;
    },
});

当用户从页面上其他位置的列表中选择资产时，会显示包含此内容的大量数据。资产“具有”工作流程，其“具有”许多步骤。步骤数据存储在window.Steps中，然后调用：

function populateSteps() {
    window.workStepLists = new WorkStepView({
        collection: window.Steps,
        el: $('#workflowSteps')[0],
    });
    workStepLists.render();
}

但后来我明白了：

列表顶部有一个无关的“未定义”。在获取和渲染此模型之前，它不存在。我根本不知道该怎么做。

帮助？

Answer 1

您没有将output初始化为任何内容。因此，output += "foo"变为“undefinedfoo”。

只需使用空字符串初始化输出变量：

var output = '';