javascript - 将 src 值设置到 iframe 中

Question

我正在尝试使用 iFrame 元素将 src 值设置到 Backbone View 中。此 src 值来自模型，但无法正确渲染。它返回 Not Found 在服务器上找不到请求的 URL。如果您手动输入网址，请检查拼写并重试。 我怎样才能让它发挥作用？有什么想法吗？

这是代码:

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

你的第一个问题是你的 View 的 el :

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

el 应该是 DOM 选择器字符串或 DOM 节点。您的 HTML 片段都不是这些。此外，下划线模板标记(即 <%= url %> )不会在 el 中进行评估。自 el不是模板。

你的第二个问题是你的render :

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

正在尝试设置您 View 的 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 can be resolved from a DOM selector string or an Element; otherwise it will be created from the view's tagName, className, id and attributes properties.

您想要 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/