Question

我想在iframe中查看html文档。对于类似的事情：

<div id="some">
    <iframe id="other" />
</div>

我想将从服务器收到的html文档动态加载到此iframe中。问题是，我想为该文档使用Backbone View。如果我做这样的事情：

var projectView = Backbone.View.extend(
{
    tagName: 'html',


    initialize: function()
    {
        this.model.bind('sync', this.render, this);
    },


    render: function()
    {
        this.$el.html(this.model.get('content')); // content is from model, and it     
        //receives the html document from server
        return this;
    }
});

然后，当我这样做时：

var iframe = $('#other')[0].contentWindow.document;
iframeDocument.open();
iframeDocument.write(projectView.render().el);
iframeDocument.close();

它不起作用。我尝试了很多不同的组合但没有成功。如果我使用带有静态html的document.write（）它可以正常工作但是如何处理骨干视图和动态内容？

Answer 1

＆＃34; el＆＃34; property是对HTML对象的引用。当该函数实际需要HTML字符串时，您将它传递给document.write（）调用。这就是静态HTML适合您的原因。

所以你可能想做这样的事情：

iframeDocument.open();
iframeDocument.write(projectView.render().el.innerHTML);
iframeDocument.close();

Answer 2

我认为您的方法不必要地复杂，使用主干并不能为您带来任何有用的东西。为什么不用模型的iframe网址设置src s content属性并完成？

render: function()
{
    this.$el.attr('src', this.model.url()); //Or whatever you need to get the right URL
    return this;
}

Answer 3

没有理由使用iframe。

您可以使用div替换iframe，并且每次触发同步事件时都会呈现。

您还可以使用on代替bind来举办活动。

var projectView = Backbone.View.extend(
{
    tagName: 'div',


    initialize: function()
    {
        this.model.on('sync', this.render, this);
    },


    render: function()
    {
        this.$el.html(this.model.get('content')); // content is from model, and it     
        //receives the html document from server
        return this;
    }
});

然后将视图放入容器

$('#some').html(projectView.el);

您可能必须在同步时从模型中删除一些不必要的内容（即<head>标记

Backbone js查看整个html文档

3 个答案: