0

我正在尝试使用主干和 jQuery 为原型应用程序制作模型应用程序。在这一点上它非常小。 http://jsfiddle.net/IgnorantUser/u7JkX/

我只有 2 个模型Canvas和ButtonWidget. 还有 3 个视图：CanvasView用于 Canvas 的ButtonInCanvas视图，用于ButtonWidget 模型ButtonWidget的虚拟视图ButtonInToolbar，取而代之的是它从 .button css 类中获取默认值，并用于拖放到画布中，用按钮填充它。

由于会有其他小部件（标签、文本框、图像持有者等...），我采用了在“ButtonInToolbar”视图的上下文中传递由“CanvasView”触发的放置事件处理的方法，方法是使用以下代码：

    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.leftandui.position.top值传递到ButtonInToolbar视图中，这样当我调用 dropHandler 方法来附加一个新ButtonInCanvas视图时，我可以传递放置的位置并将 Button 渲染到它实际的位置掉了。我怎么做？ 

    dropHandler: function () {
        $('.canvas').append(new ButtonInCanvas({model: new ButtonWidget}).render().el);
    }

我尝试(event, ui)在上述函数中传递，以便ui.position.left获得值，但我得到“未捕获的类型错误：无法读取未定义的属性‘位置’”。我该如何解决这个问题？

此外，在上面的代码中，我使用的是画布选择器而不是CanvasView实例。考虑到将来会有多个CanvasView，我怎么能关联特定的CanvasView实例，以便小部件只附加到它而不是所有具有画布类的 DOM 元素中？

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

4

2 回答 2

0

来自jQuery .trigger() 文档：

.trigger( eventType [, extraParameters ] )

eventType类型：字符串 包含 JavaScript 事件类型的字符串，例如单击或提交。 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;
}

请参阅更新的小提琴。

于 2013-01-10T13:15:13.290 回答
0

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获取来设置 css 顶部/宽度。position x/y我在里面调用这个方法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). 我想cid会成功的！兴奋的！

于 2013-01-11T10:06:57.130 回答