1

私はバックボーン ビューを持っています。ビューは次のrenderようになります。

render: function()
{
    var template = _.template($("#mytemp").html() , {
        'mylabel' : "test"
    });

    this.$el.html(template);
    this.$el.css({"border" : "1px solid black"})
    this.$el.resizable({ });           
}

問題は、サイズ変更可能なプラグインが DOM 要素を .xml に追加することによって機能すること$elです。ただし、これを使用$el.html(template)すると、サイズ変更可能な要素の前後に配置したかどうかに関係なく、これらの DOM 要素が消去されたように見えます。render最初に呼び出されたときにすべてが機能しますrenderが、再度呼び出されると、サイズ変更可能なものは機能しなくなります。

テンプレートを何らかの方法で変更する必要がありますか?

http://jsbin.com/oyutey/2/edit

4

1 に答える 1

3

問題は、これを行うときです：

this.$el.html(template);

サイズ変更可能な余分な DOM 要素はすべて削除されます。次に、ウィジェットをバインドします。

this.$el.resizable({ });

ただし、サイズ変更可能はまだ適切にバインドされていると考えているため、2 番目のthis.$el.resizable()呼び出しは何もしません。その結果、サイズ変更可能なバインドはありますthis.$elが、その DOM 要素 (サイズ変更ハンドルなど) は存在しなくなります。

簡単な修正は、次のように、呼び出す前にサイズ変更可能をデタッチし、this.$el.html()後で再バインドすることです。

render: function() {
    var template = _.template($("#mytemp").html() , {
        'mylabel' : "test"
    });

    if(this.rendered) // Unbind the resizable if we've already bound it
        this.$el.resizable('destroy');
    this.$el.html(template);
    this.$el.css({"border" : "1px solid black"});
    this.$el.resizable({ }); // Set up the resizable as usual.
    this.rendered = true;    // Make a note that we've already been here.
    return this;             // This is conventional so it is a good idea to do it.
}

デモ: http://jsbin.com/oyutey/3/edit

于 2013-05-25T23:08:46.423 に答える