1

私が何を意味するのかを簡単に説明しましょう。EmberとRailsを利用したアプリを書いています。すべての従業員は、他の同僚に称賛を与えることができます。彼は他に何人受け取ったかわからない。残された賞賛の数と、他の人から受け取った賞賛の数しかわかりません。

しかし、Railsとの通信方法がよくわかりません。写真は千の言葉に値するので、これを見てください: kudos app http://wstaw.org/m/2013/03/25/kudos.png

アプリが起動すると、/usersを指すユーザーのリストが読み込まれます。現在のユーザーは/currentuserにいます。現在のユーザーは、kudosReceivedやkudosLeftなどの追加フィールドがあるという点で異なります。

ジョーに工藤を追加したいとしましょう。ボタンをクリックすると、何が表示されますか?/ kudos / useridに行くと、railsが魔法をかけるとしましょう。ジョーに賞賛を加えるだけです。ただし、更新された現在のユーザーデータも取得したいと思います(/ currentuserにあることを忘れないでください)。

何を送ればいいですか?最初にコントローラーでCREATEまたはUPDATEメソッドを使用する必要がありますか?現在のユーザーの新しいデータを取得するにはどうすればよいですか?コールバックで?または、GETで/currentuserを使用する必要があります。でもいつ?

これは私が今持っているものですが、それがどれほど正しいかは完全にわかりません

// application.handlebars
<h1>My Kudos</h1>

<div id="kudos-content">
  <ul id="kudos-list">
    {{#with controllers.current}}
    <li>
      <p>{{firstName}} {{lastName}}</p>
      <p><img {{bindAttr src="imageUrl"}}  /></p>
      <p>received: {{kudosReceived}}</p>
      <p>left: {{kudosLeft}}</p>
    </li>
    {{/with}}
    {{#each user in controllers.users}}
    <li>
        <p>{{user.firstName}} {{user.lastName}}</p>
        <img {{bindAttr src="user.imageUrl"}}  />
        <a href="#" {{action "addKudo" user.id target="controller.controllers.kudo"}}>(+)</a>
    </li>
    {{/each}}
  </ul>
</div>

Sks.KudoController = Ember.ObjectController.extend({
    addKudo: function(userId) {
      // create a new record on a local transaction
      this.transaction = this.get('store').transaction();
      // don't really know what next
    }
});

次の問題は、{{action}}で/ kudo/useridを使用する方法です。

4

1 に答える 1

1

Kudoクライアントのをカウンター以外のものとして気にする必要はないようです。Kudoクライアントは、特定のものがどこから来たのか、それについて何か他のものを知りません。その場合、現在のユーザーが残した数の数にKudo過ぎないものとして扱うだけで十分です。-1Kudo

この場合、のDS.Modelクラスを作成しKudo、関係を心配し、Kudoストアにすべてを保存し、サーバーにJSONを投稿するのは100%やり過ぎです。これは、サーバーがaのJSONを予期せず、ターゲットユーザーKudoのサーバー側を作成しKudoたり、カウンターをインクリメントしたりする場合などに特に当てはまります。

そのURLをヒットするだけで十分であり、そのように聞こえる場合は、jQuery.ajax()を使用してURLをタップすることをお勧めします。また、応答が成功すると、現在のユーザーの数が1つ少なくなるkudosLeftと思います。これは、currentUserモデルをサーバーに同期することを心配するのではなく、成功コールバックで処理するだけです。それが理想的でない場合は、サーバーがサーバー側モデルreloadを追跡していると仮定して、currentUserを呼び出して新しいデータを手動でフェッチできます。kudosLeft

まず、needs: ['current']KudoControllerに追加して、currentUserにアクセスできるようにします。

その後、addKudo

addKudo: function(user) {
    jQuery.post('/kudo/' + user.get('id'), jQuery.proxy(function () {
          this.decrementProperty('controllers.current.kudosLeft');
        }, this));
}

これは、がセットをそのに渡すようにCurrentControllerするためのものであると想定しています。ObjectControllercontent

最後に、IDだけでなく完全なオブジェクト{{action}}を含めるように更新します。User

<a href="#" {{action "addKudo" user target="controller.controllers.kudo"}}>(+)</a>

いくつかの注意:

(1)このスキームを使用すると、たとえば、ユーザーがアプリの別のコピーを開いてKudoそこにsを送信した場合に、クライアントがサーバーと同期しなくなる可能性があります。これは問題である場合とそうでない場合があります。たとえば、Stack Overflowでは、投票または承認済みの回答のステータスが変更されると、UIが動的に更新されます。あなたの場合、それが重要でないなら、すべての小さなものを同期させ続けることを単に気にしないことは受け入れられるかもしれません。この場合に行う可能性がある/kudosのは、ユーザーが何も残っていないときにクライアントがkudoを送信しようとした場合に、エンドポイントに特定のステータスコードを返すようにすることです。ajax呼び出しのコールバックは、そのステータスをテストしてユーザーのリロードをトリガーするか、kudosLeftプロパティを0にリセットすることができます。

(2)kudosLeftこのようにプロパティを設定すると、レコードがダーティとしてマークされるため、ストアがコミットされたときに更新が発生します。あなたができることは、displayKudosLeft最初にkudosLeft属性に設定されているような計算されたプロパティを持つことですが、レコードをダーティとしてマークせずに表示を更新するためにアプリによって変更することができます。

ember-dataをいつ使用するか、そしていつ$ .ajaxを使用するかについては、それは状況によって異なります。APIのサイズとRESTfulはどれくらいですか?active_model_serializersember-dataとうまく連携するを使用していますか?クライアントに反映する必要のある関係がたくさんありますか?属性の「1回限りの」更新を頻繁に行っていますか、それとも、効果を発揮するために実際にJSONを受信することを期待していないAPIエンドポイントにアクセスしていますか?

ember-dataを使用せず、問題なく動作する巨大なアプリ(または少なくとも1つ)があります。たとえば、Discourseは、の周り$.ajaxに薄いラッパーを使用しますが、それは問題なく機能します。

于 2013-03-25T17:18:28.043 に答える