javascript - 将src值设置为iframe

我正在尝试使用iFrame元素将src值设置到主干视图中。此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);

最佳答案

您的第一个问题是视图的el：

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

el应该是DOM选择器字符串或DOM节点。您的HTML代码段都不是。另外，由于<%= url %>不是模板，因此不会在el中评估Underscore模板标记（即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文档，则会看到以下内容：

可以从DOM选择器字符串或Element解析this.el；否则，它将根据视图的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/

EL

javascript - 将src值设置为iframe