在ItemView Marionette.js中使用jquery获取ui元素的正确方法

Question

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>

Answer 1

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

Answer 2

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.

Answer 3

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.