jeudi 23 juillet 2015

How to set properties in an Ember component when using an event listener now that Ember.View is deprecated?

My app is using Ember and interact js to move elements around on the screen. Interact js uses an event listener to drag items around and sets the top and left properties in the ember component. This all works in Ember 1.12, but I am trying to get ready for Ember 2.0. Ember.View.views[id] was how I was getting the component but Ember.View is no longer working. Here is the component:

/* global interact*/
"use strict";

import Ember from "ember";

export default Ember.Component.extend({
    top: 15,
    left: 15,

    // Initiates interactJS allows the element to be drug around on the canvas
    //  and restricts the element movement to the canvas.
    interactJS: function () {
        var self = this,
            $self = self.$();

        interact(".draggable").draggable({
            inertia: false,
            autoscroll: true,
            restrict: {
                restriction: "parent",
                elementRect: {
                    top: 0,
                    left: 0,
                    bottom: 0,
                    right: 0
                }
             },
            onmove: self.dragMoveListener,
        }).resizable({
            autoscroll: {
                container: "parent",
                margin: 50,
                distance: 5,
                interval: 10
            }
        });
    }.on("init"),

    // In the event I lose the component so I cannot use this.set("top", y).
    dragMoveListener: function (event) {
        // This is how I get component currently
        var target = event.target,
            $comp = Ember.$(target),
            compId = $comp.attr("id"),
            comp = Ember.View.views[compId], // What should I use instead of Ember.View?
            y,
            x;

        y =  comp.get("top") + event.dy;
        x = comp.get("left") + event.dx;
        comp.set("top", y);
        comp.set("left", x);
    }
});

How should I be getting the component so I can set its properties while in the event? Like I said in the comment I lose the component in the event, so simply doing this.set("top", y) in the event will not work. I need to get the component to set its property.




Aucun commentaire:

Enregistrer un commentaire