0

バックボーンとjQueryを使用して、プロトタイピングアプリ用のモックアップアプリケーションを作成しようとしています. この時点でかなり最小限です。 http://jsfiddle.net/IgnorantUser/u7JkX/

私は2つのモデルCanvasとButtonWidget. また、3 つのビューがあります。CanvasViewキャンバス用の 、 のButtonInCanvasビュー、およびButtonWidget モデルによってサポートされていないButtonWidgetダミー ビューが呼び出されます。代わりに、.button css クラスからデフォルト値を取得し、キャンバスへのドラッグ アンド ドロップに使用されます。 ButtonInToolbar、ボタンを配置します。

他のウィジェット (ラベル、テキスト ボックス、イメージ ホルダーなど) があるので、次のコードを使用して、「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.leftとのui.position.top値をButtonInToolbarビューに渡すことができるようにしたいということです。これにより、dropHandler メソッドを呼び出して新しいButtonInCanvasビューを追加するときに、ドロップの位置を渡し、ボタンを実際の場所にレンダリングできます。落とした。それ、どうやったら出来るの？ 

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

(event, ui)値を取得できるように上記の関数内を渡そうとしましたが、 ui.position.left「Uncaught TypeError: Undefined のプロパティ 'position' を読み取れません」というメッセージが表示されます。この問題を回避するにはどうすればよいですか?

また、上記のコードでは、CanvasViewインスタンスの代わりにキャンバスのセレクターを使用しています。将来的に複数の が存在することを念頭に置いて、キャンバスのクラスを持つすべての DOM 要素ではなく、ウィジェットがそれにのみ追加されるようにCanvasView、特定のインスタンスを関連付けるにはどうすればよいでしょうか?CanvasView

さらに重要なことは、Backbone を使用するのはこれが初めての試みであり、「ToDo」アプリとの共通点があまりないため、私の実装で致命的なエラーがあれば指摘してもらえますか? 私が間違っていること、またはより良い/より効率的な方法で行うことができたはずのこと

4

2 に答える 2

0

ルーカス、助けてくれて本当にありがとう！:) 最後に、オフセットをビューコンストラクターに渡すためにコードのビットを使用することができました

$('.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 の特定のインスタンスでの追加全体に頭を悩ませる必要があります$(.canvas)。私cidはトリックを行うと思います！興奮した！

于 2013-01-11T10:06:57.130 に答える
0

jQuery .trigger() ドキュメントから:

.trigger( eventType [, extraParameters ] )

eventTypeタイプ: 文字列 クリックや送信などの JavaScript イベント タイプを含む文字列。 extraParameters型: 配列、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;
}

更新された fiddleを参照してください。

于 2013-01-10T13:15:13.290 に答える