Jade variable rendering

Question

Folks, How would I access variables that I set in script. ?

#someModal.modal.fade.large
 .modal-dialog(style="width:70%")
    .modal-content
        .modal-header
            button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
            h2.modal-title #{someVariable}
        .modal-body
            h3
               ...

script.
    | var someVariable = #{someVariable};

script.
    $('body').on('show.bs.modal', '.modal', function () {
        var someVariable = 'test';
    });

Answer 1

The workaround I typically use is just attaching the variable to the window:

#someModal.modal.fade.large
 .modal-dialog(style="width:70%")
    .modal-content
        .modal-header
            button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
            h2.modal-title #{someVariable}
        .modal-body
            h3
               ...
script
  | var someVariable = #{someVariable};
script.
    $('body').on('show.bs.modal', '.modal', function () {
        var someVariable = 'test';
    });

Note that you'll need to JSON.stringify the variable if it is an Object (or Array ).

Answer 2

Your script will not start to run until your page has loaded, so jade will never have access to the variables that are set on the client. You should use jQuery to modify the HTML elements instead.

script.
    var $modal = $('#someModal')
      , $title = $modal.find('.modal-title');
    $modal.on('show.bs.modal', '.modal', function () {
        var someVariable = 'test';
        $title.text(someVariable);
    });

    $modal.modal();