Question

我正在尝试使用骨干和放大器制作用于原型设计应用的模拟应用程序。 jQuery的。在这一点上它是非常小的。 http://jsfiddle.net/IgnorantUser/u7JkX/

我只有2个模型Canvas和ButtonWidget。还有3个视图：Canvas的CanvasView，ButtonInCanvas的{{1}}视图和ButtonWidget模型不支持的名为ButtonWidget的虚拟视图，而不是它从.button css类中获取它的默认值并用于拖动和放入画布，用按钮填充它。

因为会有其他小部件（标签，文本框，图像持有者等......）我采用了在“ButtonInToolbar”视图的上下文中通过“CanvasView”触发的drop事件处理的方法，使用以下代码：

ButtonInToolbar

我面临的问题是我希望能够将passDrop: function (e, ui){ if ($(ui.draggable).parent().is('#toolbar')){ ui.draggable.trigger('drop'); //sets the drop in the context of the dragged view (ButtonInToolbar) }和ui.position.left值传递到ui.position.top视图中，这样当我调用dropHandler方法追加一个新的ButtonInToolbar视图，我可以传递drop的位置并将Button渲染到实际丢弃的位置。 我该怎么做？

ButtonInCanvas

我已经尝试在上面的函数中传递dropHandler: function () { $('.canvas').append(new ButtonInCanvas({model: new ButtonWidget}).render().el); }，这样我就可以得到(event, ui)值，但是我得到“未捕获的TypeError：无法读取未定义的属性'位置”。我怎么能解决这个问题？

此外，在上面的代码中，我使用画布的选择器而不是ui.position.left实例。考虑到将来会有多个CanvasView，我如何关联特定的CanvasView实例，以便Widgets只附加到它中而不是所有具有类的DOM元素中帆布？

更重要的是，由于这是我第一次使用Backbone，并且它与“ToDo”应用程序没有多少共同之处，你能指出我的实现中的任何致命错误吗？我做错了，或者我本可以用更好/更有效的方式做的事情

Answer 1

来自jQuery .trigger() docs：

.trigger( eventType [, extraParameters ] )
eventType类型：String包含JavaScript事件类型的字符串，例如click或submit。 extraParameters类型：Array，PlainObject要传递的其他参数一直到事件处理程序。

因此，您可以在.trigger()函数中传递所需的任何其他参数：

passDrop: function (e, ui) {
    if ($(ui.draggable).parent().is('#toolbar')) {
        var offset = this.$el.offset(),
            top = ui.offset.top - offset.top,
            left = ui.offset.left - offset.left;
        ui.draggable.trigger('drop', [top, left]);
    }
}

并处理回调中的额外参数：

dropHandler: function (event, top, left) {
    var el = new ButtonInCanvas({model: new ButtonWidget}).render().el;
    $(el).css({position: "absolute", top: top, left: left});
    $('.canvas').append(el);
}

另外，在CSS中添加以下内容：

.canvas {
    position: relative;
}

请参阅updated fiddle。

Answer 2

Lukas我不能非常感谢你给我的帮助！ :) 最后，我设法使用你的代码来将偏移量传递给视图构造函数

$('.canvas').append(new ButtonInCanvas({
    model: new ButtonWidget,
    xpos:left,
    ypos:top
  }).render().el);

然后我在model.options的初始化中使用了ButtonInCanvas来将放置位置值设置到模型本身中：

initialize: function (){
_.bindAll(this, 'render', 'setCssStyle', 'setPosition'); 
this.model.set({
    'positionx': this.options.xpos,
    'positiony': this.options.ypos
})

最后我制作了一个方法setPosition，通过从模型中获取position x/y来设置css顶部/宽度。我在render function

中调用此方法

setPosition: function () {
    this.$el.css({
    left: this.model.get('positionx') + 'px',
    top : this.model.get('positiony') + 'px',
    position: "absolute"
     });
},

另外，我已经更新了jsfiddle http://jsfiddle.net/IgnorantUser/u7JkX/

现在我需要在canvas的特定实例而不是$(.canvas)中了解整个追加。我想cid会做到这一点！兴奋！

在可拖动的主干视图的上下文中传递'drop'，并将ui.position传递给它

2 个答案: