CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsbackbone.js
underscore666
underscore666

Reputation: 1739

About Jeditable jquery plugin in the context of Backbone.View

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);
},

Upvotes: 0

Views: 483

Answers (2)

offangfang
offangfang

Reputation: 1

Var That = This is wrong. This is the DOM not the backbone view. You can do:

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

"view" in the hash would be the backbone view. It can be accessed in the close function. 

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

Upvotes: 0

Deeptechtons
Deeptechtons

Reputation: 11125

in the initialize function

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

Close function definition

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

Complete Code

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

Upvotes: 1

Related Questions