Есть ли в Марионетке нанлог нубл?

Question

Есть ли в Марионетке нанлог нубл?

0

Предположим, что у меня есть элемент <p> внутри MyView который стал текстовой областью в событии click. Как я могу изменить область текста обратно в абзац после того, как текстовая область потеряет фокус?

С Marionette я могу справиться с такими действиями мыши:

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

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

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

});

Предположим, что я хочу сделать клик, ввести новое сообщение и просто щелкнуть в любом месте, чтобы сохранить этот пост. Есть ли что-то в Marionette, например, "onblur", как противоположность событию "click"?

PS Если что-то неясно, опубликуйте комментарий, и я обновлю вопрос.

Cherry 13 май 2014, в 13:21

Источник

0

есть метод размытия ....
Bhojendra Rauniyar 13 май 2014, в 10:33
0

Используйте метод фокусировки. api.jquery.com/focusout
malkam 13 май 2014, в 10:34

Теги:

javascript

jquery

marionette

1 ответ

Ещё вопросы

Используйте метод фокусировки. api.jquery.com/focusout

Wilbert van de Ridder · Answer 1 · 2014-05-13T09-02-00.000Z

Один из способов сделать это:

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

Это делает следующее:

Определите два отдельных вида для режима редактирования и отображения
Представьте родительское представление, которое прослушивает его дочерние события и позаботится о замене представлений.
Дети запускают даже на родительском макете.

Полный пример и демонстрационный пример с использованием двух экземпляров: 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>