The right way to get a ui element with jquery inside ItemView Marionette.js

Question

I am studying Marionette.js and would like to know the right way to get the ui element to be manipulated with jQuery. In my LoginItemView, I declare ui elements and a function to display an invalid login error message:

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 templateMessage code 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 selectorui to the element. ui- A simple object for matching selectors to keys.

Just use

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

Answer 2

, , DOM .

- - , displayMessage , , .

- - , @Billy Chan node.

, , .

Answer 3

It is very simple to use the ui element as a jquery object

Use this.ui.messageContainer.show()

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