Change modal header title dynamically

[ghost]

I would like to know how I can change the modal header title dynamically. I use a grunt development workflow and build my templates with grunt-contrib-jst, for my Backbone.View I can render my view and adjust my template like this:

        initialize: function (options) {
            this.title = options.title;
            this.data = options.data;
        },

        render: function () {
            this.$el.html(this.template({
                title: this.title,
                data: this.data.toJSON()
            }));

            return this;
        }

and I use the above in my html template like this <%= jst.title %> and <%= jst.data %> . I would like that in my modal, but I really don't know how. This renders the modal.

        testModal: function () {

            this.testModalView = new App.ModalTest({
                title: "asdf"
            });

            this.$modalTest.html(this.testModalView.render().el);
        }

    App.ModalTest = Backbone.Modal.extend({
        template: JST.bewaking_planblok_modal_test,
        cancelEl: ".bbm-button"
    });

<div class="bbm-modal__topbar">
    <h3 class="bbm-modal__title"></h3>
</div>
<div class="bbm-modal__section">
    <p>With Backbone.Modal you can create a modal in a few lines of code.</p>
    <p>Some features are:</p>
    <ul>
        <li>Really flexible and easy to set up.</li>
        <li>Default behaviors like ESC or clicking outside a modal.</li>
        <li>Some awesome animations that make them feel robust.</li>
        <li>Responsive and usable on mobile devices.</li>
    </ul>
</div>
<div class="bbm-modal__bottombar">
    <a href="#" class="bbm-button">close</a>
</div>

Notice that the jst object is not yet used in the template. As soon as I try to use it, like below. It will only build the header with no other styling. How to use JST templates with Backbone.Modal? :

    App.ModalTest = Backbone.Modal.extend({
        cancelEl: ".bbm-button",

        initialize: function (options) {
            this.template = JST.bewaking_planblok_modal_test({
                title: options.title
            });
        }
    });

<div class="bbm-modal__topbar">
    <h3 class="bbm-modal__title"><%= jst.title %></h3>
</div>
<div class="bbm-modal__section">
    <p>With Backbone.Modal you can create a modal in a few lines of code.</p>
    <p>Some features are:</p>
    <ul>
        <li>Really flexible and easy to set up.</li>
        <li>Default behaviors like ESC or clicking outside a modal.</li>
        <li>Some awesome animations that make them feel robust.</li>
        <li>Responsive and usable on mobile devices.</li>
    </ul>
</div>
<div class="bbm-modal__bottombar">
    <a href="#" class="bbm-button">close</a>
</div>

[linus-amg]

you could re-write the serializeData method for that specific 'class' and return a title property in the result

serializeData: (data) ->
  data = data or {}
  data.__title = 'ASDF'
  return data

and in your template (handlebars)

<div class="bbm-modal__topbar">
    <h3 class="bbm-modal__title">{{ __title }}</h3>
</div>
<div class="bbm-modal__section">
    <p>With Backbone.Modal you can create a modal in a few lines of code.</p>
    <p>Some features are:</p>
    <ul>
        <li>Really flexible and easy to set up.</li>
        <li>Default behaviors like ESC or clicking outside a modal.</li>
        <li>Some awesome animations that make them feel robust.</li>
        <li>Responsive and usable on mobile devices.</li>
    </ul>
</div>
<div class="bbm-modal__bottombar">
    <a href="#" class="bbm-button">close</a>
</div>

[linus-amg]

that is also a nice way to introduce l18n stuff

[jimf]

Closing due to lack of activity. Feel free to reopen if you're still in need of assistance.