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();

それは動作しません。さまざまな組み合わせを試しましたが、成功しませんでした。静的 html で document.write() を使用すると正常に動作しますが、バックボーン ビューと動的コンテンツをどのように処理すればよいですか?

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 でiframes属性を設定するだけで、それで完了です。srccontent

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 に答える