如何在Ember中与Rails进行通信 [英] how to communicate with Rails in Ember
问题描述
但是我不太明白如何与Rails沟通。由于图片价值千言万语，请仔细看看：
kudos app http://wstaw.org/m/2013/03/25/kudos.png
当应用启动时，我加载了一个列表的用户指向/用户。当前用户在/ currentuser。当前用户的区别在于它有其他字段，如kudosReceived和kudosLeft。
我们假设我想添加Joe a kudo。我点击一个按钮，然后，什么？假设当我去/ kudos / userid rails会做它的魔法。它只是添加了乔一个kudo。但是我也想获得更新的当前用户数据（记住，它在/ currentuser）。
我应该发送什么？我应该首先在控制器上使用CREATE或UPDATE方法吗？如何获取当前用户的新数据？在回调？或者我应该使用/ currentuser与GET。但是什么时候？
这是我现在所在，但我完全不确定它是多么正确
// 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>已收到：{{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 =＃{{actionaddKudouser.id target =controller.controllers.kudo}}>（+）< / a>
< / li>
{{/ each}}
< / ul>
< / div>
Sks.KudoController = Ember.ObjectController.extend（{
addKudo：function（userId）{
//在本地事务上创建一个新记录
这个。 transaction = this.get（'store'）。transaction（）;
//不知道下一个
}
}）;
下一个问题是如何在{{action}}中使用/ kudo / userid
听起来没有必要关心客户端的 Kudo 除了一个柜台。客户不知道哪个特定的 Kudo 来自或其他任何东西。在这种情况下，将 Kudo 视为$ -1 的数量就足够了当前用户已经离开了c $ c> Kudo 。
如果是这样，那么为 Kudo创建一个 DS.Model / code>，担心关系，将有关 Kudo 的所有内容存储在商店中，并将JSON发布到服务器100％过度。如果服务器不希望JSON为 Kudo 而只是创建一个 Kudo 服务器端，那么这是非常真实的一个目标用户，或增加一个计数器，或任何。
如果只是点击该URL是所有必要的，这听起来像是这样，那么我建议只需使用jQuery.ajax（）来点击URL。我也假设一个成功的回应意味着目前的用户有一个少于$ code> kudosLeft ，我只是在成功回调中处理这个，而不是担心同步currentUser模型到服务器。如果不理想，可以在currentUser上调用 reload 来手动获取新数据，假设服务器一直跟踪 kudosLeft 在服务器端模型。
首先，添加需要：['current'] 到您的KudoController，以便您可以访问currentUser。
然后在 addKudo
addKudo：function（user）{
jQuery.post（'/ kudo /'+ user.get（'id'），jQuery.proxy （function（）{
this.decrementProperty（'controllers.current.kudosLeft'）;
}，this））;
}
这假设 CurrentController 是一个 ObjectController ，以便它将集合传递到其内容。
最后，更新您的 {{action}} 以包含完整的用户对象，而不是仅id：
< a href =＃{{actionaddKudouser target =controller.controllers.kudo }}>（+）< / A>
几个注释：
（1 ）可以使用这种方案使客户端与服务器不同步，例如，如果用户有另一个应用程序的副本被打开，并发送 Kudo 在那里。这可能是也可能不是问题。例如，在堆栈溢出中，UI会在投票或接受回答状态更改时动态更新。在你的情况下可能会被接受，如果没有意义，只要不保持每个小东西都同步。在这种情况下您可能会做的是如果客户端尝试在用户没有离开时发送kudo，则您的 / kudos 端点返回特定状态代码。 ajax调用上的回调可以测试该状态并触发用户的重新加载，或者将 kudosLeft 属性重置为0。
（2）设置这样的 kudosLeft 属性会将记录标记为脏，因此会在存储提交时导致更新。您可以做的是具有计算属性，例如最初设置为 kudosLeft 属性的 displayKudosLeft ，但可以由应用程序更改显示，而不会将记录标记为脏。
至于何时使用ember-data，以及何时使用$ .ajax，那要看。你的API有多大，RESTful如何？您是否使用ember-data发挥好的 active_model_serializers ？你有很多关系需要反映在客户端吗？您是否正在进行很多一次性更新的属性，或者点击实际不希望接收JSON的API端点，以达到其效果？
有巨大的应用程序（或至少一个）不使用ember数据，做的很好。例如，话语使用围绕 $。ajax 的薄包装，而且它的效果很好。
Let me explain shortly what I mean. I'm writing an app that makes use of Ember and Rails. Every employee can give other co-workers a kudo. He can't know how many others received. I can only know how many left kudos I have to give and how many I received from others.
But I can't really understand how to communicate with Rails. As a picture is worth a thousand words, please take a look at this: kudos app http://wstaw.org/m/2013/03/25/kudos.png
When the app starts I load a list of users pointing to /users. Current user is at /currentuser. Current user differs in that it has additional fields like kudosReceived and kudosLeft.
Let's suppose I'd like to add Joe a kudo. I click on a button, and then, what? Suppose that when I go to /kudos/userid rails will do its magic. It just adds Joe a kudo. But I'd also like to get the updated current user data (remember, it is at /currentuser).
What should I send? Should I first use CREATE or UPDATE method on the controller? How can I obtain current user new data? In a callback? Or should I use /currentuser with GET. But when?
This is what I have now, but I'm completely unsure how correct it is
// 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
}
});
The next problem is how to use /kudo/userid in {{action}}
It sounds like it isn't necessary to care about the Kudo in the client as anything but a counter. The client doesn't know where any particular Kudo came from or anything else about it. In that case, it should be sufficient to treat Kudo as nothing more than a -1 on the number of Kudos the current user has left.
If this is the case, then creating a DS.Model class for Kudo, worrying about relationships, storing everything about a Kudo in the store, and posting JSON to the server is 100% overkill. This is ESPECIALLY true if the server doesn't expect JSON for a Kudo and simply creates a Kudo server-side for a target user, or increments a counter, or whatever.
If simply hitting that URL is all that is necessary, and it sounds like it is, then I'd suggest simply using jQuery.ajax() to tap the URL. I'd also assume that a successful response means that the current user has one less kudosLeft, and I'd simply handle that in the success callback, rather than worrying about syncing the currentUser model to the server. If that isn't ideal, you can call reload on the currentUser to fetch the new data manually, assuming the server has been keeping track of kudosLeft on the server-side model.
First, add needs: ['current'] to your KudoController so you have access to the currentUser.
Then in addKudo
addKudo: function(user) {
jQuery.post('/kudo/' + user.get('id'), jQuery.proxy(function () {
this.decrementProperty('controllers.current.kudosLeft');
}, this));
}
This assumes that CurrentController is an ObjectController so that it passes the set through to its content.
Finally, update your {{action}} to include the full User object instead of just the id:
<a href="#" {{action "addKudo" user target="controller.controllers.kudo"}}>(+)</a>
A few notes:
(1) It is possible using this scheme for the client to become out of sync with the server, if for instance, the user has another copy of the app open and sends Kudos there. This may or may not be a problem. In Stack Overflow, for instance, the UI dynamically updates when votes or accepted answer status changes. It might be accepted in your case to simply not care about keeping every little thing synced if it isn't of significance. What you might do in this case is have your /kudos endpoint return a particular status code if the client attempts to send a kudo when the user has none left. The callback on the ajax call could test for that status and trigger a reload on the user, or just reset the kudosLeft property to 0.
(2) Setting the kudosLeft property like this will mark the record as dirty and thus will cause an update when the store is committed. What you can do is have a computed property, such as displayKudosLeft that is initially set to the kudosLeft attribute, but can be changed by the app to update the display without marking the record as dirty.
As for when to use ember-data, and when to use $.ajax, well, that depends. How large is your API and how RESTful is it? Do you use active_model_serializers, which play nicely with ember-data? Do you have a lot of relationships that need to be reflected on the client? Are you doing a lot of "one-off" updating of attributes, or hitting API end points that don't actually expect to receive JSON in order to have their effect?
There are huge apps (or, at least one) that don't use ember-data and do just fine. Discourse, for instance, uses a thin wrapper around $.ajax, and it does just fine.
这篇关于如何在Ember中与Rails进行通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
