Question

此Meteor客户端代码尝试获取2个值（1）this.label行的<span class="radio-label">{{this.label}}</span>中的值（2）{{this.result}}行中<input type="radio" name="rbtn" value={{this.result}}>的值当我点击input或span元素时，就会发生这种情况。怎么办？ THX

Template.results.events({
  'click .twin-item': (event) => {
    event.preventDefault();
    event.stopPropagation();
    if (event.target.tagName === 'SPAN') {
      console.log(event.target.innerHTML);
    } else if (event.target.tagName === 'INPUT') {
      console.log(event.target.value);
    }
  }
});


<template name="results">
 <p id="result" data-id={{_id}}>{{{display.name}}} <br>
{{display.address}} <br>
<span id="category">{{display.result}}</span></p> <br>
  <div class="twin-group js-radioGroup" data-id={{_id}}>
    <ul class="upShift">
      {{#each display.deciders}}
        <li>
          <label class="twin-item">
            <input type="radio" name="rbtn" value={{this.result}}>
            <span class="radio-label">{{this.label}}</span>
          </label>
        </li>
      {{/each}}
    </ul>
  </div>
</template>

Answer 1

每当您尝试从最初放在模板中的DOM中提取某些内容时，您可能做错了。

您可以在{{#each}}循环中嵌套另一个模板，然后在嵌套模板处理程序中，this的值将成为当前数据上下文，以便您可以执行以下操作：

HTML：

<template name="results">
<p id="result" data-id={{_id}}>{{{display.name}}} <br>
{{display.address}} <br>
<span id="category">{{display.result}}</span></p> <br>
  <div class="twin-group js-radioGroup" data-id={{_id}}>
    <ul class="upShift">
      {{#each display.deciders}}
        {{> inner}}
      {{/each}}
    </ul>
  </div>
</template>

<template name="inner">
<li>
  <label class="twin-item">
    <input type="radio" name="rbtn" value={{result}}>
    <span class="radio-label">{{label}}</span>
  </label>
</li>
</template>

将事件附加到每个控件可能更简单，而不是试图找出事件来自哪个控件：

JS：

Template.inner.events({
  'click input'(event) => {
    event.stopPropagation();
    console.log(this.result);
  },
  'click span'(event) =>{
    event.stopPropagation();
    console.log(this.label);  
  }
});

Answer 2

以下对我有用。但我希望这是一个更好的解决方案。通过向input和span元素添加不同的类，并使用事件处理程序。

Template.results.events({
  'click .radio-label': (event) => {
    event.preventDefault();
    event.stopPropagation();
    let option = event.target.innerHTML;
    let btn = event.target.parentElement.children[0];
    let res = btn.getAttribute('value');
    btn.checked = true;
    console.log(option + ' ' + res);
  },
  'click .radio-btn': (event) => {
    let res = event.target.parentElement.children[0].getAttribute('value');
    let option = event.target.parentElement.children[1].innerHTML;
    console.log(option + ' ' + res);
  }
});

<template name="results">
  <p id="result" data-id={{_id}}>{{{display.name}}} <br>
    {{display.address}} <br>
    <span id="category">{{display.result}}</span></p>

  <div class="twin-group js-radioGroup">
    <ul class="upShift">
      {{#each display.deciders}}
        <li>
          <label class="twin-item">
            <input class="radio-btn" type="radio" name="rbtn" value={{this.result}}>
            <span class="radio-label">{{this.label}}</span>
          </label>
        </li>
      {{/each}}
    </ul>
  </div>
</template>

获取html nextSibling

2 个答案: