1

我不明白 Backbone.View.render() 和 .el 的操作。在 render() 中，我为 this.el 分配了支持我希望看到的输出的属性，这些属性在测试时位于 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 说在最后一个测试中 << test_row >> 返回<label></label>。但是在 JavaScript 控制台中，<< test_row >> 返回文本中预期的字符串。

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

4

1 回答 1

0

迪拉是对的，问题是对象与字符串的比较。

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

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-worthy 咒语的控制台输出是"<label for="id_username">Username:</label>".

虽然它接近了人类不应该知道的那些事情，但勇敢的，或者鲁莽的，可以在这里发现这个神秘的秘密。

于 2011-11-03T18:53:54.847 回答