CODEWITHSUNDEEP
javascriptnode.jstwitter-bootstrappug
Cmag
Cmag

Reputation: 15770

Jade variable rendering

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

Upvotes: 0

Views: 339

Answers (2)

Wex
Wex

Reputation: 15715

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();

Upvotes: 1

Wex
Wex

Reputation: 15715

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).

Upvotes: 1

Related Questions