Etch.js integration with Backbone.Marionette.js

Question

Does anyone ever faced the integration of Etch.js in a Backbone.Marionette.js application?

I'm having issues binding the save event. This is the code for my Marionette view:

MyApp.module('Views', function(Views, App, Backbone, Marionette, $, _) {

    Views.DetailsView = Marionette.ItemView.extend({

        template: '#details',

        initialize: function(options) {
            _.bindAll(this.model, 'save'); // I think the problem is related to the binding
            this.model.bind('save', this.model.save);
        },

        events: {
            'mousedown .editable': 'editableClick'
        },

        editableClick: etch.editableInit
    });
});

and in my template I have something like the following:

<div id="detail-expanded">
     <p>Description: <span class="editable">{{ description }}</span></p>
</div>

The plugin is loaded correctly, if I click on the field I can see the Etch buttons bar, I can edit the content of the element made editable and if I click on the save button I'm actually able to trigger the model save() method.

The problem is that the model submitted is the original one, without the edits that I did to the field. I think it's a binding problem, any ideas?

Thanks in advance, as always.

Answer 1

So, the problem here is not really related to marionette, it's that etch doesn't handle moving the data from the editable field to the model. I should be more explicit about that in the docs. What you want to do is create a save function on the view that does this for you like so:

Views.DetailsView = Marionette.ItemView.extend({

    template: '#details',

    initialize: function(options) {
        _.bindAll(this, 'save');
        this.model.bind('save', this.save);
    },

    events: {
        'mousedown .editable': 'editableClick'
    },

    editableClick: etch.editableInit,

    save: function() {
      // populate model attrs from dom
      var title = this.$('.title').text();
      var body = this.$('.body').text();


      this.model.save({title: title, body: body});
    }
});

Sorry for the confusion. I can see how the docs are misleading in this regard.