3

我的应用程序正在使用 Ember 和交互 js 在屏幕上移动元素。Interact js 使用事件监听器来拖动项目并在 ember 组件中设置 top 和 left 属性。这一切都适用于 Ember 1.12，但我正在努力为 Ember 2.0 做好准备。Ember.View.views[id]是我获取组件的方式，但 Ember.View 不再工作。这是组件：

/* 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);
    }
});

我应该如何获取组件以便在事件中设置其属性？就像我在评论中说的那样，我在事件中丢失了组件，所以简单地this.set("top", y)在事件中做是行不通的。我需要让组件设置其属性。

4

0 回答 0