javascript - Marionette 中有 onBlur nanlog 吗？

Question

假设我有一个<p>里面的元素 MyView它成为点击事件的文本区域。文本区域失去焦点后如何将文本区域更改回段落？

使用 Marionette，我可以处理这样的鼠标单击操作:

MyView = Backbone.Marionette.ItemView.extend({
    tagName: "p",

  events: {
    "click p": "someFunction"
    "onBlur - ?"
  },

  someFunction : function () {
    //replace <p> with <textarea>
  }

});

假设我想单击，输入新消息，然后单击任意位置即可保存此帖子。 Marionette 中是否有类似“onblur”操作与“click”事件相反的操作？

P.S.如果有不清楚的地方，请发表评论，我会更新问题。

Answer 1

一种方法是这样的:

// Itemview: editmode
var editModeView = Marionette.ItemView.extend({
    model: textModelInstance,    
    template: "#editmode-tmpl",
    ui: {
        textarea: 'textarea'
    },
    events: {
        'blur @ui.textarea': 'saveText'
    },
    saveText: function () {
        // Save the value
        this.model.set('content', this.ui.textarea.val());

        // Trigger
        Marionette.getOption(this, "parentView").trigger('text:save');  
    },
    onDomRefresh: function() {
        // Make sure the element has focus
        this.ui.textarea.focus();
    }
});

// Itemview: showmode
var showModeView = Marionette.ItemView.extend({
    model: textModelInstance,  
    template: "#viewmode-tmpl",
    ui: {
        textarea: '.showtext'
    },
    events: {
        'click @ui.textarea': 'textClicked'  
    },
    modelEvents: {
        'change': 'updateValue'
    },
    textClicked: function() {
        Marionette.getOption(this, "parentView").trigger('text:edit');    
    },
    updateValue: function() {
        this.ui.textarea.html(this.model.get('content'));    
    }
});

var editableComponent = Marionette.Layout.extend({
    template: "#editable-tmpl",
    initialize: function() {
        // Make the view listen to events triggered on itself
        Marionette.bindEntityEvents(this, this, this.events);     
    },
    regions: {
        textregion: '.panel-body'    
    },
    onRender: function() {
        this.loadShowMode();        
    },
    events: {
        'text:edit': 'loadEditMode',
        'text:save': 'loadShowMode' 
    },
    loadEditMode: function() {
        this.textregion.show(new editModeView({
            parentView: this
        }));        
    },
    loadShowMode: function() {  
        this.textregion.show(new showModeView({
            parentView: this
        }));  
    }
});

这会执行以下操作:

• 为编辑和显示模式定义两个单独的 View
• 拥有一个父 View ，用于监听其子级事件并负责交换 View 。
• 子级在父级布局上触发事件。

使用两个实例的完整示例和演示:http://jsfiddle.net/Cardiff/Sj4ge/

供引用的附加代码:

// Model
var textModel = Backbone.Model.extend({
    defaults: {
        content: "Default text, click here to edit!"   
    }
});
var textModelInstance = new textModel();

// Create a region
var rm = new Marionette.RegionManager();
rm.addRegion("container", "#container");

// Show the editable component
rm.get('container').show( new editableComponent());

// The templates used
<script type="text/html" id="editmode-tmpl">
    <textarea class="form-control" rows="3"><%= content %></textarea>
</script>

<script type="text/html" id="viewmode-tmpl">
    <p><%= content %></p>
</script>

<script type="text/template" id="editable-tmpl">
<div class="panel panel-success"> 
        <div class="panel-heading"> 
            <h4 class="panel-title" > Editable text </h4>           
        </div>
        <div class="panel-body">
        </div>
    </div >
</script>