I'm learning Marionette.js and would like know the correct way to get the ui element to manipulate it with jQuery. In my LoginItemView I'm declaring the ui elements and an function to display a error message of invalid login:

ui: {
  username: "#username",
  password: "#password",
  btnLogin: "#btnDoLogin",
  messageContainer: "#messageContainer"
},
displayMessage: function() {
  // show error message
  $(this.ui.messageContainer.selector).show();
},

I also tried:

  $(this.ui.messageContainer[0]).show();

but the message is never displayed.
And here is the code of containerMessage in the template.

<div class="alert alert-danger alert-dismissable login-message-display" id="#messageContainer" style="display: none;">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <strong>Error!</strong> Username and/or password incorrect!
</div>

I'm learning Marionette.js and would like know the correct way to get the ui element to manipulate it with jQuery. In my LoginItemView I'm declaring the ui elements and an function to display a error message of invalid login:

ui: {
  username: "#username",
  password: "#password",
  btnLogin: "#btnDoLogin",
  messageContainer: "#messageContainer"
},
displayMessage: function() {
  // show error message
  $(this.ui.messageContainer.selector).show();
},

I also tried:

  $(this.ui.messageContainer[0]).show();

but the message is never displayed.
And here is the code of containerMessage in the template.

<div class="alert alert-danger alert-dismissable login-message-display" id="#messageContainer" style="display: none;">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <strong>Error!</strong> Username and/or password incorrect!
</div>

• javascript
• jquery
• marionette

Share Improve this question Follow edited Feb 28, 2014 at 5:13 rodrigopandini asked Feb 28, 2014 at 4:24 rodrigopandinirodrigopandini 94511 gold badge88 silver badges1818 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

There is no need to add selector on the ui element. ui is a simple object to map the selectors to keys.

Just use

$(this.ui.messageContainer).show();

First of all be sure that you manipulate with DOM elements after view is rendered.

Second - be sure that displayMessage is caled with proper context, i mean this in linked with view instanse.

Third - use this syntax provided by @Billy Chan to operate with node.

If you need further assist - please create fiddle for tests.

It is very Simple to use ui element as jquery object

Use this.ui.messageContainer.show()

this.ui.messageContainer will itself return the jquery object.