0

カレンダーページ付きのアプリがあります。そのページには、予定を表す要素があります。これまでの予定の表示方法は次のとおりです。

  1. すべての要素をページに印刷します。各要素には。が付いていposition: absoluteます。
  2. 要素を繰り返し処理し、各要素を取得して、予定が開始する日の遅い時間に基づいてappointment_idその要素の属性を設定します。top

つまり、、ですべての予定を重ねてダンプしtop: 0、left: 0次に各予定を垂直方向に正しい位置に移動します。（これは複数人のスケジュールカレンダーであり、通常の壁掛けカレンダーではありません。）予定を列に配置するのと同じようなことをしますが、それは今のところ重要ではありません。

これが私の問題です。最初のページの読み込みでは、すべての予定要素にIDが関連付けられているため、すべてが正常に機能します。ただし、予定を更新すると、そのIDが消去され、再配置を行うとその予定が失われます。左上にくっつくだけです。

これが起こっている理由は明らかであり、理にかなっています。どうしたらいいのかわからない。バックボーンで、モデルのIDを使用できない場合、どのように要素を参照できますか？

さらに複雑にするために、ビューがレンダリングされた後に実行しない限り、この再配置はまったく機能しません。つまり、ルーターで再配置を行う必要があります。これは間違っているようで、ルーターの範囲内では、個々の要素にアクセスできなくなりました。私は予定モデルを含むコレクションにのみアクセスできます。各モデルをその要素に一致させることができるのは、その要素が独自の予定IDを知っている場合のみですが、更新後はそうではありません。

うまくいけば、それはすべて理にかなっています。助言がありますか？

4

1 に答える 1

0

アポイントメントを表す各DOM要素は、アポイントメントモデルがバインドされた個別のビューである必要があります。

アポイントメントモデルが変更された場合、必要なのはその単一のビューを再レンダリングすることだけです（1つの位置のみを再計算し、DOM操作を少なくします）。

AppointmentView：

AppointmentView = Backbone.View.extend
    # model: Appointment
    tagName: "div"
    events: {}

    initialize: ->
        @model.on 'change:time', @render, @

    render: ->
        # calculate the position and append to the DOM
        # you can take a look at setElement function, if needed - http://documentcloud.github.com/backbone/#View-setElement
于 2012-06-28T19:21:45.220 に答える