Question

我不了解Backbone.View.render（）和.el的操作。在render（）中，我为this.el分配了支持我希望看到的outpout的属性，这些属性在测试时在this.el中，并且.el在控制台中返回预期的输出。但输出没有出现在测试中。

以下是代码和测试（请忽略残酷，我正在学习并努力保持测试的绿色）：

var RowLabelData = Backbone.Model.extend({});

var RowLabel = Backbone.View.extend({
    initialize: function() {
           this.for_attr = this.model.get("for_attr");
           this.text_val = this.model.get("text_val");
           this.el.setAttribute("for", this.for_attr);
        },

    render: function() {
        $(this.el).html(this.text_val);
        return this;
        }
});

我使用QUnit测试如下：

test_row_data   =   new RowLabelData({
                        for_attr: "id_username",
                        text_val: "Username:"
                    });
test_row_v      =   new RowLabel({
                        model: test_row_data,
                        tagName: 'label'
                    });
test_row_v.render();
test_row = test_row_v.el;

equal(test_row.textContent, "Username:");
equal(test_row.getAttribute("for"), "id_username");
// FAILS:
equal(test_row, '<label for="id_username">Username:</label>');

QUnit说在最后一次测试中＆lt;＆lt; test_row＆gt;＆gt;返回<label></label>。但是在JavaScript控制台中，＆lt;＆lt; test_row＆gt;＆gt;返回文本中预期的字符串。

主干文档说render（）应该将所需的HTML放入el中，但我正在尝试使用render（）的默认行为，并且它在控制台中工作。为什么它在测试中不起作用？

Answer 1

dira是对的，问题是将Object与字符串进行比较。

此测试代码创建一个类似的元素，然后将其和测试对象转换为字符串进行比较：

new_label = document.createElement("label");
new_label.setAttribute("for", "id_username");
t = document.createTextNode("Username:");
new_label.appendChild(t);

equal(
    $('<div>').append($(test_row).clone()).remove().html(),
    $('<div>').append($(new_label).clone()).remove().html(),
    "convoluted!"
);

这过去了。这些符合cthulhu的咒语的控制台输出是"<label for="id_username">Username:</label>"。

虽然它接近那些人无法知道的事情，但勇敢或蛮干的人可以发现这个神秘的秘密here。

Backbone.View测试输出不同控制台输出

1 个答案: