0

私はバックボーンを使用しており、次のビューがあります。

class GT.RunManager.Views.ViolationMarker extends Backbone.View
 className: 'violation-marker'

 template: JST['app/templates/violation_marker']

 initialize: (@options) ->
   @x = @options.x
   @y = @options.y
   @location = @options.location
   @render()

 render: =>
   @$el.html @template()
   @$el.data 'location', @location
   @$el.css
     'top': @y
     'left': @x
   this

次から呼び出されます:

class GT.RunManager.Views.FloorplanView extends Backbone.View
  className: 'floorplan-view'

  events:
   'click .violation-marker' : 'edit_location'
   'click'  : 'create_location'

 initialize: (@options) ->
   @run = @options.run
   @student = @options.student
   @floorplan = @options.run.get('floorplan')
   @locations = new GT.RunManager.Collections.Locations()
   @locations.run = @options.run
   @locations.on 'add', @set_marker
   @locations.on 'reset', @load_markers

 @run.on 'remove_location', (location) =>
   location.destroy() if location
   @load_markers()

 @locations.fetch data: { student_id: @student.id }
 @render()

render: =>
  if @floorplan
    @$el.css 'background-image', "url(data:image/png;base64,#{@floorplan.url})"
  this    

create_location: (e) =>
  @locations.create x: e.offsetX - 10, y: e.offsetY - 10, student_id: @student.id, run_id: @run.id

load_markers: =>
  @$el.find('i').remove()
  @locations.each (location) => @set_marker(location, false)

set_marker: (location, prompt = true) =>
  marker = new GT.RunManager.Views.ViolationMarker(location: location, x: location.get('x'), y: location.get('y'))
  @$el.append marker.el
  if prompt
    @run.trigger 'violations:set', location

アイデアは、ユーザーがタッチした画面上にアイコンを配置することです (iPad では、exp)。Chrome と Safari ではうまく機能しますが、代わりにアイコンが親 div の左上隅に配置される Firefox では機能しません。

何か案は?

編集: このバックボーン ビューは、次の css でスタイル設定されています。

div.violation-marker {
position: absolute;
background-color: red;
@include border-radius(6px);
padding: 4px;}

テンプレートは(ブートストラップ)です:

<i class="icon icon-fire icon-white"></i>

親 div は次のようにスタイル設定されます。

.floorplan-view {
position: relative;
float: left;
margin-left: 100px;
width: 755px;
height: 755px; }      
4

1 に答える 1