将 src 值设置为 iframe

Question

我正在尝试将 src 值设置到具有 iFrame 元素的 Backbone 视图中。此 src 值来自模型，但未正确呈现。它 returns 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 的 content 设置为模型 url 属性的值，并尝试设置 iframe 没有做任何有用的事情。通常你会在 render:

中说更像这样的话

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

this.model.toJSON() 通常 returns 一个 key/value 对的对象，这就是编译后的 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.

您想要 iframe 的 tagName 和 attributes 的 { src: the_url_from_the_model }，因此您的视图将变成这样：

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

Setting a src value into an iframe

javascript

backbone.js