装订样式属性

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来自handlebars文件本身。所以我不能做一个计算属性来解决这个问题。

有没有人遇到过这种情况，并知道如何解决它？

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。

我不得不通过属性和动作，我可能错过了一些东西。
我希望它至少能给你一个解决方案的想法。