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

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 = '';