每个循环

Question

我有这段代码：

    {{#each hotspots as |hotspot|}}
      {{#unless (eq hotspot.x_axis "")}}
        {{#if (eq categoryId hotspot.category)}}
          {{#draggable-item content=hotspot.id dragEnter=(action "setIsDragged" "isDragged") dragEnd=(action "setIsDragged" false)}}
            <div {{action 'showMarkerModal' hotspot.id}} class="normal-markers {{isDragged}}" style="position:absolute;top:{{{hotspot.y_axis}}}px;left:{{{hotspot.x_axis}}}px;"><i class="fa fa-map-marker {{isDragged}}"></i></div>
          {{/draggable-item}}
          <span style="position:absolute;top:{{{hotspot.y_axis}}}px;left:{{{hotspot.x_axis}}}px;">
          </span>
        {{/if}}
      {{/unless}}
    {{/each}}

这给了我以下警告：

  

警告：绑定样式属性可能会引入跨站点脚本   漏洞;请确保绑定的值正确   逃过一劫。有关更多信息，包括如何禁用此警告，   看到   http://emberjs.com/deprecations/v1.x/#toc_binding-style-attributes

我知道为什么会抛出警告，但我无法弄清楚如何绑定内联属性，因为x_axis和y_axis来自手柄文件本身。所以我不能做一个计算属性来解决这个问题。

之前有没有人遇到这个并且知道如何解决它？

Answer 1

将迭代主体包装在组件中，并在组件中创建计算属性：

{{#each hotspots as |hotspot|}}
  {{#unless (eq hotspot.x_axis "")}}
    {{#if (eq categoryId hotspot.category)}}
      {{my-draggable-item content=hotspot.id
          dragEnter=(action "setIsDragged" "isDragged")
          dragEnd=(action "setIsDragged" false)
          isDragged=isDragged
          showMarkerModal="showMarkerModal"}}
    {{/if}}
  {{/unless}}
{{/each}}


// my-draggable-item.hbs
{{#draggable-item content=content dragEnter=dragEnter dragEnd=dragEnd}}
  <div {{action 'showMarkerModal' hotspot.id}} class="normal-markers {{isDragged}}" style={{computedStyle}}><i class="fa fa-map-marker {{isDragged}}"></i></div>
{{/draggable-item}}
<span style={{computedStyle}}></span>


// my-draggable-item.js
export default Ember.Component.extend({
  computedStyle: Ember.computed('hotspot.{x_axis,y_axis}', function() {
    let xAxis = this.get('hotspot.x_axis');
    let yAxis = this.get('hotspot.y_axis');

    return Ember.String.htmlSafe(`position:absolute;top:${yAxis}px;left:${xAxis}px;`);
  }),

  actions: {
    showMarkerModal(id) {
      this.sendAction('showMarkerModal', id);
    }
  }
}};

"hotspot.{x_axis,y_axis}"被称为“大括号扩展”，与"hotspot.x_axis, hotspot.y_axis"相同 反对和${}内插ES2015 template strings。

我不得不传递财产和行动，我可能错过了一些东西 我希望它至少能让你了解解决方案。