How to pass Backbone.js model data to Bootbox with Handlebars.js?

Question

I have a marionette view that have a method to create a new model from a bootbox. Now i need to be able to edit the model from the bootbox, how can i I pass the current model data to the box? This is some of my current code:

Module.Views.Chaptersx = Marionette.CompositeView.extend({
    template: Module.Templates['documents/create/course/chapter/index'],
    childView: Module.Views.ChapterItemx,
    childViewContainer: "#chaptersCollection",
    events: {
        'click .chapters-create': 'create',
        //'click #uploadFilesChapters': 'startUpload'
    },

    create: function (evt) {
        console.log('create');
        evt.preventDefault();
        var me = this;
        var box = bootbox.dialog({
            show: false,
            title: "Nueva Seccion",
            message: Module.Templates['documents/create/course/chapter/chapterModal'],
            buttons: {
                success: {
                    label: "Guardar",
                    className: "btn-success",
                    callback: function () {
                        var chapterNo = $('#cn').val();
                        var chapterName = $('#chapterName').val();

                        var chapter = new Module.Models.Chapter({
                            chapterNo: chapterNo,
                            chapterName: chapterName,

                        });
                        me.collection.add(chapter);

                    }
                }
            }
        });
        box.on("show.bs.modal", function () {
            console.log('numbers');
            var number = (me.collection.size() + 1);
            $('#cn').val(number);
        });
        box.modal('show');


    },

Answer 1

TL;DR - use model's custom events or an event bus to pass the data.

---

• You can reference this.model in the view, which is somewhat of a compromise (you're tying the view and the model).

• You could pass the data via the event object's data property, but for that you're gonna have to extend some methods and get into backbone's nitty gritty.

• Use a data- attribute on the element:

  <div class="chapters-create" data-cats></div>
  

  create: function (evt) {
      var cats = $(evt.currentTarget).data('cats');
      // ...
  }
  

  … which is considered bad habit by the way - you're still tying data to the DOM (or model to view, MVC speaking).

Well, I don't like either of the above, as they tend to have high coupling - I'd do it with custom events on a shared model resides at a higher level.

I don't know where the data comes from, but bottom line - shoot it in a custom event, or, better yet, use an event bus, like the one offered by marionette.js.

Answer 2

You need to create another view, call it EditView or something, render it, and provide the view.el as a message option to bootbox. However, the whole thing feels like a hack to me, and I think that it's better to implement a modalRegion and manage the modals yourself.