問題タブ [backbone-views]

私は backbone.js から始めたばかりで、モデリングの概念に頭を悩ませようとしています。バックボーン js を使用してショッピング カート アプリを作成し、サード パーティの REST API (レールではなく、変更できません) とやり取りしたいと考えています。

これは、カートの内容を取得するための JSON 応答の例です。

この JSON データを見ると、「product_total」や「shipping_total」などの集計データと、その中に含まれる「product_items」や「order_price_adjustments」などのリストがあります。個々の「product_items」でも、「price_adjustments」のネストされたリストを持つことができます。

このショッピング カートを backbone.js でモデル化するにはどうすればよいですか? 表示されるすべてのハッシュ ("product_item"、"price_adjustment") のモデルを作成し、それらのモデルのコレクションをモデル化し、それらのコレクションと集計データを含むバスケット モデルを作成する必要がありますか? 私はこれにアプローチする方法がわかりません...

フォームを送信するために、非表示の iframe と JavaScript を使用して、単一のボタン ファイルのアップロードを作成しました。バックボーンが成功したときにリッスンするようにしようとしているので、画像をページに挿入するための新しい div を作成できますが、イベントをリッスンする方法はかなり新しいです。私のアプローチは非常に原始的なので、フィードバックは素晴らしいです--

ファイルが送信されると、PHP はデータベースにアップロードし、完了すると iframe に「成功」​​を吐き出します。

バックボーンは、アップロードがヒットすると、特定の時間間隔で Jquery をチェックして、非表示の iframe で成功または失敗を見つけ、html のテキストを確認したら、ビューの新しい広告を作成します。

これは非常に悪い処理方法のように思えますが、エレガントな解決策が見つかりません。

クリックイベントを特定の量の特別な div にバインドする必要があります。どの div をバインドする必要があるかは実行時にしかわからないため、これらすべての特別な div のクラスを設定して「イベント」にバインドするだけでよいと考えていましたが、いずれかをクリックします。これらの div はすべての div をトリガーし、イベントで変数を使用しようとしましたが、これらの変数は実行時にのみ認識されるため、イベントをバインドするときに未定義であることがわかりました実行時にバックボーン内のイベントをバインドするために jQuery を使用しています。しかし、ビューを初期化するたびに、イベントはすぐに発生します

なぜこれらが起こるのか、誰かが親切に説明してくれますか？また、イベントを動的に生成された div にバインドするにはどうすればよいですか?

(おそらく、このようなバックボーン ビューを使用するべきではなかったことはわかっていますが、これは要件の一部です)

問題は、'name' 以外のすべてのオブジェクト属性が、テンプレートからアクセスしたときにコンソールでエラー 'id/url/whatever is not defined' を呼び出すことです。「名前」だけのテンプレートは問題なく表示され、正しい名前が表示されますが、別の属性を呼び出すとすぐに、たとえば. idまたはurl、壊れます。ビューに渡されるオブジェクトは、解析された静的 JSON ファイルであり、すべてのアイテムが同じレベルにあり、コンソールからアクセスできます。collectionName.models[0].get('id');

私が混乱したのは、 name 属性が、バックボーン/アンダースコアコードのどこかにデフォルトとして事前定義されているかのように機能することです。

非常に明白な何かが欠けていますか？コンソールからモデルデータにアクセスできるので、ビュー自体のデータの扱い方に問題があると思いますが、いくつかの方法で書き直してみましたが、違いはないようです。

渡されたオブジェクト形式。これはcollectionName.models[0].attributes;、コンソールに返されるものでもあります。

}

テンプレート コードの例:

ルーターコード:

ビュー:

モデルコード:

テンプレートとブートストラップ

I need to have arguments to the functions used in the events object in Backbone.

Now let the definition of open be:

I will call open from another function and will pass id when I call it. So based on whether I pass id or not I need to do different things. How do I do this in Backbone? Currently, id when called via click I expect it to be undefined. But an event object is passed.

Why does this happend and how can I pass an argument?

バックボーンアプリには、モデルに裏打ちされたビューがあり、モデルをコレクションに保存しています。ページにはこれらのビューがいくつかあり、一度に選択できるのは1つだけです。したがって、これらのビューのコレクションを含む別のビューがあります。ユーザーがフォーカスされていないビューをクリックすると、ビューはモデルの「フォーカスされた」属性をtrueに設定します。モデルのセットは、ビュー自体によって処理される変更イベント（$ elにフォーカスされたクラスを追加する）と、コレクション内のすべてのビューをループし、フォーカスされているビューのフォーカスを解除するViewCollectionビューをトリガーします（クリックしたばかりのもの以外）。

適度な速度でクリックすると、これはすべてうまく機能します。ただし、非常に速くクリックすると、モデルの設定された動作に矛盾が見られます。つまり、モデルの「focused」属性をtrueに設定すると、次のクリックイベントは、そのモデルの「focused」属性がまだfalseであることを示します。

コード：

上記のログステートメントからの出力は次のとおりです。

ご覧のとおり、最初にAをクリックし、次にCをクリックしました。変更されたイベントが発生し、ビューとコレクションの両方が適切に動作しました。ただし、2回目のクリックでは、Aの「focused」属性はtrueであるはずのときにfalseになります。繰り返しますが、これは私がビューを非常に速くクリックしたときにのみ発生します。通常の速度でクリックすると、この問題を再現できません。

どんな助けでも大歓迎です！

.delegateEvents()ページから親ビューを削除してから元に戻した後、イベントを再委任するために、親「コレクション」ビュー内のすべての子ビューを呼び出す必要があります。

これを行うには 2 つの方法がありますが、どちらも適切な慣行という点で私には正しくないように思えます。

• )が親addOne(ビューで呼び出されるたびに、作成されたばかりの子ビューをリストに保存します。後でビューがページに再度追加されたときに、イベントを再委任する必要がある場合。配列を使用してそのリストをスクロール.delegateEvents()し、各子ビュー アイテムを呼び出します。このアプローチの問題は、ビューがすでに子ビューに影響を与えるバックボーン認可の方法を持っている場合に、ビュー内のすべてを保持するために別の配列を作成することです。this.collection.each()
• ビュー内の組み込みを使用して、View.collection.each()各子モデルをスクロールします。各モデルで、対応するビューがそれ自体を呼び出すイベントをトリガー.delegateEvents()します。このアプローチの問題点は、純粋にビュー指向のアクションがモデルを介してルーティングされていることです。

これらのアプローチのいずれかが良いですか、それともこれを行うべきより良い方法はありますか?

本当にありがとう！

HTML要素、または正しいCSSスタイルのプロパティと組み合わせると、他の要素のコンテナーとして使用できることを除いてフットプリントがない要素はありますか？

これは、ページマーカーの「マーカー」のようなもので、jQueryによって実際のHTMLを配置する必要があります。

それがどのように見えるかの例：

私が尋ねる理由は、Backbonejsを使用していて、画面にビューを追加する必要がある場合、ビューを作成するときにビューをペグする要素を指定する必要があるためです。これには欠点があります。 ：

または、既存の要素（通常はdiv）内にビューを挿入する必要があります。これにより、テンプレート作成が困難になります。

どんな入力でも大歓迎です、どうもありがとう！

レンダリングされたときにクリックイベントが添付されたリンクが含まれているネストされたビューを内部に持っています。初めてすべてのリンクをクリックすると、すべてが機能します。ただし、すべてのビューを再レンダリングすると、リンク イベントが消えます。レンダリングで delegateEvents() を強制し、再レンダリングする前にビューを削除しようとしましたが、何もしませんでした。

これが私のコードです：

初めてのバックボーン アプリを作成しようとしていますが、ビューの使用方法を理解するのに苦労しています。

私がやろうとしているのは、送信されるたびにサーバーからコレクションを取得する検索入力を用意することです。1 つのビューで検索入力領域を制御し、そこで発生するイベント (この例ではボタンのクリック) をリッスンし、別のビューで検索結果を表示するサブビューを作成したいと考えています。新しい検索ごとに、結果を検索領域の前に追加するだけです。

個々の結果には、他の方法があります (入力された日付や時刻の検索など)。

次のように定義されたモデルとコレクションがあります。

私のビューでは、検索入力を表すビューが 1 つあります。

私のhtmlはおおよそ次のようになります。

私のコードではconsole.log('starting new search');、ResultSetView コレクションの初期化メソッドからサーバーへの ajax 呼び出しは行われません。

私はこれを正しく設計していますか、それともこれを行うためのより良い方法がありますか? 2 つのビューは異なる dom 要素にバインドされるため、あるビューを別のビューからインスタンス化するべきではないと思います。アドバイスをいただければ幸いです。これをより明確に述べる必要がある場合はお知らせください。質問を言い換えるために最善を尽くします。