#each-iteration 中的 this.data

Question

我正在尝试访问 {{#each in}} 迭代中的值：

{{#each room in channels}}
  <form class="enterRoom">
    <button type="submit" class="roomJoin">
      <b>{{room.name}}</b>  
        <img src="{{room.roomBanner}}" alt=".">
           <input type="hidden" value="{{room.name}}" name="name">
         </button>            
          <div class="inRoom"> 
           {{#each name in room.inRoom}} 
              <a href="/c/{{name}}" target="_blank">{{name}}</a> 
           {{/each}}
          </div> 
  </form>
{{/each}}

通常我会使用this.name，例如，在事件中获取它的名称以便进一步使用它，就像这样

'submit .enterRoom'(event) {
  event.preventDefault();

  const isClosed = this.name; // room.name example here

   }

但这在这种情况下不起作用。我之前尝试的是：

• room.name
• this.room.name

但是那些给出相同的错误

chat.js:86 Uncaught ReferenceError: room is not defined
    at Object.submit .enterRoom (chat.js:86)
    at blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3818
    at Function.Template._withTemplateInstanceFunc (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3769)
    at Blaze.View.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3817)
    at blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2617
    at Object.Blaze._withCurrentView (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2271)
    at Blaze._DOMRange.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2616)
    at HTMLFormElement.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:863)
    at HTMLDivElement.dispatch (modules.js?hash=8331598f8baf48556a442a64933e9b70b778274a:9685)
    at HTMLDivElement.elemData.handle (modules.js?hash=8331598f8baf48556a442a64933e9b70b778274a:9492)

有人可以向我解释我如何在这个 {{each in}} 设置中正确地做到这一点吗？

Answer 1

该错误与模板的each 迭代无关。您尝试的是在 submit 事件句柄中获取表单数据。但是，没有上下文绑定到 this 或 room。

为了获取房间值，你需要访问输入值。

Blaze 提供了一种快速的方法，通过使用模板的内置 jQuery（使用 templateInstance.$），它自动将范围限定为模板根而不是整个文档：

'submit .enterRoom'(event, templateInstance) {
  event.preventDefault();
  const roomName = templateInstance.$(event.currentTarget).find('input[name="name"]').val();
  // ...
}