Question

我正在学习Marionette.js并想知道使用jQuery操作ui元素的正确方法。在我的LoginItemView中，我正在声明ui元素和一个显示无效登录错误消息的函数：


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

我也尝试过：


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

但永远不会显示该消息。
这是模板中的containerMessage代码。

<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

无需在ui元素上添加selector。 ui是一个将选择器映射到键的简单对象。

只需使用

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

Answer 2

首先确保在渲染视图后使用DOM元素进行操作。

第二 - 确保 displayMessage 与适当的上下文相关联，我的意思是 this 与view instanse相关联。

第三 - 使用@Billy Chan提供的语法来操作节点。

如果您需要进一步的帮助 - 请为测试创建小提琴。

Answer 3

将ui元素用作jquery对象

非常简单

Use this.ui.messageContainer.show()

this.ui.messageContainer将自己返回jquery对象。

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

3 个答案: