ember.js 和服务器

Posted 2023-02-19

【中文标题】ember.js 和服务器

【英文标题】：ember.js and the server

【发布时间】：2012-02-15 10:04:54

【问题描述】：

我正在查看 Ember.js，并且一直在阅读文档以尝试了解如何使用它。我明白了（很好），除了一件事。根据我在 MVC 模式中的思考方式，模型是应用程序中数据的存储库。我可以看到 Ember.js 中的客户端数据是如何工作的。我没有得到的是如何将该数据绑定回服务器，以便如果客户端的数据发生更改，则更改会在服务器中更新。反之亦然。我一直在通过在我的 Web 应用程序中对服务器进行 Ajax/JSON 调用来执行此操作，我只是不知道如何使用 Ember.js 来执行此操作。

【参考方案1】：

在emberjs on GitHub 附近挖掘了一下，我发现了这个：https://github.com/emberjs/data：

Ember Data 是一个用于从持久层加载模型的库 （例如 JSON API），更新这些模型，然后保存更改。 它提供了您在服务器端 ORM 中可以找到的许多功能，例如 ActiveRecord，但专为独特的环境而设计 浏览器中的 javascript。

我还建议阅读Ember.js Live Collections。您想要的是拥有一组知道如何与服务器端同步的模型，可能的示例代码是：

// our model
App.Person = Ember.Object.extend();

App.people = Ember.ArrayController.create(
  content: [],
  save: function () 
    // assuming you are using jQuery, but could be other AJAX/DOM framework
    $.post(
      url: "/people",
      data: JSON.stringify( this.toArray() ),
      success: function ( data ) 
        // your data should already be rendered with latest changes
        // however, you might want to change status from something to "saved" etc.
      
    );
  
);

您可以在需要的时候致电App.people.save()。

还请务必查看这篇文章 Advice on & Instruction in the Use Of Ember.js，该文章深入探讨了与 Ember 的服务器-客户端通信，还提到了 emberjs/data。

注意：应谨慎使用 Emberjs 数据库，因为它尚未准备好用于生产。

【讨论】：

感谢您的出色回答，非常有帮助，您参考的文章将对我有用。在某些方面，Ember.js 在客户端的使用方式有点像中介者/同事模式，这对于管理 GUI 对话框中的更改很有用。您上面的提示将帮助我将这类事情放在一起以保持服务器/客户端同步。再次，非常感谢！

我认为目前不应该使用 ember-data，因为它清楚地表明它是 emberjs 的 WORK IN PROGRESS 和 UNDER RAPID DEVELOPMENT 部分。我认为一个稳定的替代方案会很棒。

@random 到 Trek 的链接在那里绝对有价值，它有一个旧版本的文章的链接，它很有教育意义，让人们了解如何在 ember 中进行客户端-服务器通信。放回去。

您删除了指向旧版 Trek 文章的直接链接，取而代之的是显示已移动的页面。故意的？

@random 是的，因为该页面还提到了（通过路由器）而不是过时文章的首选方式 - 让人们选择是否要查看旧文章以学习或者他们会跟随新链接

【参考方案2】：

在 Ember.js 中，Ember 对象中包含的“模型”将包含对底层服务器端数据库的进一步抽象，如果您正在使用的话。然后，应用程序的控制器部分应该具有允许您检索和发送数据的方法，这些方法在需要时调用以更新模型（使用 Ajax）。这很好，因为您有一个模型可以在客户端快速响应用户向应用程序提供的任何输入（击键、鼠标移动等），并选择性地选择何时对服务器端数据库进行相对昂贵的查询。这样一来，应用程序的某些性能就不再受到对外部服务器的数据请求延迟的影响，在某些情况下，这可以让您创建响应能力接近原生应用程序的应用程序。

【讨论】：

DOM 是文档对象模型，通常指 html（或 XML）元素及其 API 的树表示。在 Ember.js 中，模型肯定不会存储在 DOM 中，将数据存储在 DOM 中并不是一个好主意——DOM 是 JavaScript 浏览器 API 中最慢的部分。您也许可以将绑定存储在 DOM 中（就像 knockout.js 一样），但不能存储模型本身。这就是为什么目前正在完成从 jQuery 的所有转变——不再将数据的状态和数据本身存储在 DOM 中。

@gryzzly - 任何关于 DOM 的文章/讨论引用都变慢并且 jQuery 有问题？

也许对于你的使用来说，jQuery 和 DOM 都很好！当我第一次阅读关于 BackboneJS 的描述时：“在开发涉及大量 JavaScript 的 Web 应用程序时，您首先要学习的一件事就是停止将数据绑定到 DOM。创建 JavaScript 应用程序太容易了，这些应用程序最终会变成一堆错综复杂的 jQuery 选择器和回调，它们都在疯狂地尝试在 HTML UI、JavaScript 逻辑和服务器上的数据库之间保持数据同步。对于富客户端应用程序，更结构化的方法通常会有所帮助。”它完全符合我的想法。

虽然您绝对可以编写基准测试（这是我第一次回答您的问题）比较数据设置并从 DOM 与内存中获取，但这并没有太大意义，这完全是为了舒适您的团队和产品的可维护性。因此，如果 DOM 方法适合您的需求，并且您不觉得需要寻找更好的替代方案，那么这并没有错。但是，当应用程序变大时，您开始意识到从类或数据属性中检索应用程序的状态以根据该状态更新一些不相关的节点并不是最有效的方法。

我认为这个答案应该被删除，因为它不仅没有回答所提出的问题，而且我会说它包含明显不正确的信息。几点： 1. DOM？根本没有联系。 2.“服务器就是客户端”，什么？ 3. 性能与 OP 的问题有什么关系？

【参考方案3】：

我喜欢像这样成对地描绘 Ember.js

视图和模板是相关联的（显然），调整 Views-Class 以控制模板（如 classNames） Router 和 Routes 的工作方式有点像 MVC 中的控制器。他们负责将请求路由到正确的端点 控制器和模型以模型为中心，其中一个（模型）描述了您将在应用程序中处理的数据，而控制器的行为类似于一种代理（或装饰器，如果这更符合您的要求）。例如，模板将连接到控制器，并且

基本上，这意味着您可以使用模型加载控制器（单个或数组），现在可以轻松地在控制器中对在该模型上工作的流程（即在其核心/数据中不接触模型的东西）进行建模。对于示例博客应用程序，您将在模型中描述 Post 并为控制器添加类似的内容

App.PostController = Ember.ObjectController.extend(
  content: null,

  // initial value
  isExpanded: false,

  expand: function() 
    this.set('isExpanded', true)
  ,

  contract: function() 
    this.set('isExpanded', false)
  
);

现在您可以通过控制器在前端思考方面与 模型的表示进行交互。是否扩展帖子不会改变模型，只会改变数据。

关于从服务器重新加载数据，我有两个答案给你

我发现this article 对理解连接很有帮助（以及简单的轮询，尽管很简单） 如果您使用的是 Rails，那么您将会很幸运能够使用即将推出的 Rails 4 Live，请参阅 this post and demo 了解精彩部分

【参考方案4】：

我意识到这个问题有点老了，但它在 ember.js 的评分最高的页面上，所以我想我会补充一点。

我最近一直在使用ember-model 来处理 RESTful 数据绑定。它的花里胡哨的东西更少，但就我的需要而言，它相当不错。基本上，它只是扩展了模型功能，以便与通过标准 REST 接口推送 JSON 对象的服务器很好地集成。