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 元素添加到$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({ });

但是 resizable 仍然认为它是正确绑定的，所以第二个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 回答