2

我想在 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();

这没用。我尝试了很多不同的组合，但没有成功。如果我将 document.write() 与静态 html 一起使用，它可以正常工作，但如何处理主干视图和动态内容？

4

3 回答 3

4

“el”属性是对 HTML 对象的引用。当该函数实际上需要一个 HTML 字符串时，您将它传递给 document.write() 调用。这就是静态 HTML 适合您的原因。

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

iframeDocument.open();
iframeDocument.write(projectView.render().el.innerHTML);
iframeDocument.close();
于 2013-07-22T22:03:47.767 回答
3

我认为您的方法不必要地复杂，使用骨干不会给您带来任何有用的东西。为什么不直接使用模型的 URL 设置iframessrc属性content并完成它呢？

render: function()
{
    this.$el.attr('src', this.model.url()); //Or whatever you need to get the right URL
    return this;
}
于 2013-07-22T21:57:04.263 回答
1

没有理由使用 iframe。

您可以将 iframe 替换为 div，每次触发同步事件时它都会呈现。

您也可以使用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>从模型中删除一些不必要的内容（即标签）

于 2013-07-22T22:16:41.213 回答