Question

我尝试将src值设置为带有iFrame元素的Backbone View。此src值来自模型，但它不能正确呈现。它返回Not Found The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.我怎样才能使它工作？有什么想法吗？

以下是代码：

app.js

var Person = Backbone.Model.extend({
    defaults: {
        url: 'https://www.w3schools.com'
    }
});

var PersonView = Backbone.View.extend({
    el: '<iframe src="<%= url %>"></iframe>',

    initialize: function () {
        this.render()
    },

    render: function () {
        this.$el.html( this.model.get('url') );
    }
});


var person = new Person;
var personView = new PersonView({ model: person });

$(document.body).append(personView.el);

仅在我在控制台中时才有效：

var btn = document.createElement("iframe");
btn.src = 'https://www.w3schools.com';
document.body.appendChild(btn);

Answer 1

您的第一个问题是您的观点el：

el: '<iframe src="<%= url %>"></iframe>'

el应该是DOM选择器字符串或DOM节点。您的HTML代码段既不是那些。另外，Underscore模板标记（即<%= url %>）不会在el中进行评估，因为el不是模板。

您的第二个问题是您的render：

this.$el.html( this.model.get('url') );

正在尝试将视图el的内容设置为模型url属性的值并尝试设置内容一个iframe没有做任何有用的事情。通常情况下，你会在render：

中说出更类似的内容

var tmpl = _.template(some_template_string);
this.$el.html(tmpl(this.model.toJSON()));
return this;

this.model.toJSON()通常会返回键/值对的对象，以及编译后的Underscore模板想要查看的对象。

在您的情况下，您甚至不需要自己的render实施，您可以通过正确构建el来实现这一切。如果您查看View#el的文档，则会看到：

this.el可以从DOM选择器字符串或Element中解析出来;否则，它将从视图的tagName，className，id和attributes属性中创建。

您需要tagName iframe和{ src: the_url_from_the_model } attributes，因此您的观点就是这样：

var PersonView = Backbone.View.extend({
    tagName: 'iframe',
    attributes: function() {
        return {
            src: this.model.get('url')
        };
    },
    initialize: function () {
        this.render();
    },
});

演示：https://jsfiddle.net/ambiguous/4t248ejp/

将src值设置为iframe

1 个答案: