Question

I’m using Ember to make a web app, where you can see different outcomes of a sports tournament. The tournament view consists of heats that have 2 slots, which all have an “athlete” -property. When you click on a slot, the athlete gets to the second round.

This is my view:

App.SlotView = Em.View.extend({
    heat:null,
    athlete:null,
    tagName:"span",
    mouseDown : function(){

            //Here's the problem: "this" isn't the original slot, but a new slot which has the original slot in its _context. I'm fixing the error with this:
            var target = this._context ? this._context : this;

            //Move the athlete forward etc...
            //....

}})

Here’s how I create a new slot:

//Inside a loop
slot = App.SlotView.create({
        athlete:seed,
        heat:heat,
        round:1,
        classNames:['slot-view']
    });
//slot is added to a heatview, which is added to App.round1heats

Here’s the template

 <script type="text/x-handlebars">

<div class="row span2">
  {{#each App.round1heats}}
    {{#view App.HeatView class="clearfix heat round1"}}

      {{#each slots}}
        <div class="athlete">
        {{#view App.SlotView}}
          {{athlete.name}}
        {{/view}}
        </div>
      {{/each}}

    {{/view}}
  {{/each}}
</div>
</script>

There’s also the problem that I can’t access the element of the views through “this” or “this._context” in the mouseDown function. Both the element & elementId -properties are undefined in both.

What’s the thing I’m missing?

Answer 1

From your question I only understood one of the problems you are having which is accessing the element and elementId from within mouseDown function.

Try this.get('element') and this.get('elementId')