Question

使用Jeditable插件，
可以非常轻松地创建提交和取消按钮这是一个非常简单的代码示例（*）

现在让我们假设在MyView（Backbone.View）中我想触发事件点击由Jeditable创建的按钮提交。
这是关于Backbone.View（**）的代码。

当我触发事件"click .submitBtn"时，$（'。edit_area'）。的值为空字符串。为了解决这个问题，我实现了以下代码（* **）

你有一些聪明的想法来改进（* **）的代码吗？我不喜欢使用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那=这是错的。这是DOM而不是骨干视图。你可以这样做：

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

散列中的

“view”将是骨干视图。它可以在关闭功能中访问。

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

关于Backbone.View上下文中的Jeditable jquery插件

2 个答案:

完整代码