javascript - About Jeditable jquery plugin in the context of Backbone.View

Question

Using the Jeditable plugin,
is possible to create, very easily, a submit and cancel button.
Here's a very simple code example (*)

Now let's suppose in MyView (Backbone.View) I would like to trigger the event click on the button submit which is created by Jeditable.
Here's the code regarding the Backbone.View (**).

When I trigger the event "click .submitBtn" the value of $('.edit_area').text is empty string. In order to fix this issue I implemented the following code (* **)

Do you have some smart idea to improve the code of (* **)? I don't like callback using setTimeout.

---

(*)

 $('.edit_area').editable(function(value, settings) {
        return(value);
     }, { 
     type      : 'textarea',
     submit    : '<div class="submitBtn">Ok</div>'
     cancel    : '<div class="submitBtn">Undo</div>'
 });

---

(**)

MyView = Backbone.View.extend({
        events: {
            "click .edit_area"          : "edit",
            "click .submitBtn"          : "close"
        },
});

---

(* **)

close: function close () 
{ 
    var that = this;
    console.log($(this.el).find("[data-tid='editable']").text()); // empty string
    setTimeout(function () {
        console.log($(that.el).find("[data-tid='editable']").text()); // update string
        that.model.save({
            name: $(that.el).find("[data-tid='editable']").text()
        });
    }, 0);
},

Answer 1

在初始化函数中

$('.edit_area').editable(this.close, { 
         type    : 'textarea',
         submit  : 'OK',
});

关闭函数定义

close:function(value, settings) { 
    this.model.save({
        name: value
    });
  });

完整代码

var editableview = Backbone.View.extend({
    initialize: function () {
        _.bind(this.close, this);
    },
    render: function () {
        $(this.el).find('.edit_area').editable(this.close, {
            type: 'textarea',
            submit: '<div class="submitBtn">Ok</div>'
            cancel: '<div class="submitBtn">Undo</div>'
        });
    },
    close: function (value, settings) {
        this.model.save({
            name: value
        });
    });
});

Answer 2

Var That = 这是错误的。这是 DOM 而不是主干视图。你可以做：

$('.edit_area').editable(this.close, { 
         type    : 'textarea',
         submit  : 'OK',
         submitdata: {view: this},
});

散列中的“视图”将是主干视图。可以在close函数中访问。

close:function(value, settings) { 
    settings.submitdata.view.model.save({
        name: value
    });
});