在每个循环内绑定样式属性

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。

我必须传递属性和操作，我可能错过了一些东西。
我希望它至少能让您对解决方案有所了解。