0

Jeditableプラグインを使用
すると、送信ボタンとキャンセル ボタンを非常に簡単に作成できます。
これは非常に簡単なコード例です (*)

MyView（Backbone.View）で、Jeditableによって作成されたボタン送信のイベントクリックをトリガーしたいとしましょう。(**)
に関するコードは次のとおりです。Backbone.View

イベントをトリガーすると"click .submitBtn"、 $('.edit_area').text の値は空の文字列になります。この問題を解決するために、次のコードを実装しました (* **)

(* **) のコードを改善する賢いアイデアはありますか? を使用したコールバックは好きではありません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);
},
4

2 に答える 2

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
        });
    });
});
于 2012-05-18T10:09:40.903 に答える