裝訂樣式屬性

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。

我不得不通過屬性和動作，我可能錯過了一些東西。
我希望它至少能給你一個解決方案的想法。