在 AngularJS 中使用 Backbone 模型答案

【问题标题】：Using Backbone models with AngularJS在 AngularJS 中使用 Backbone 模型
【发布时间】：2013-05-29 13:06:14
【问题描述】：

最近在思考Backbone.js和AngularJS的异同。

我发现 Backbone 中真正方便的是 Backbone-Models 和 Backbone-Collections。您只需要设置 urlRoot，然后通过 Ajax 与后端服务器的通信就可以正常工作了。

难道不能在 AngularJS 应用程序中只使用 Backbone-Models 和 Collections 吗？因此，我们将拥有两全其美的 AngularJS 双向数据绑定以及通过 Backbone-Models 和 Collections 方便地访问服务器端（或其他存储选项）。

快速的互联网搜索没有找到任何暗示这种使用场景的网站。所有资源要么谈论使用一个或另一个框架。

有人有使用 AngularJS 的 Backbone-Models 或 Collections 的经验吗？他们不是很好地互补吗？我是不是少了什么东西？

【问题讨论】：

为什么要使用骨干模型，你有 $resource 角度，可以很容易地直接使用 REST 与服务器端模型集成
尝试使用带有 Backbone 的模型和集合。由于下划线的支持，它很容易上瘾。我认为这个 ng-Back 的一个主要问题是 getter 和 setter 的事件问题
结果如何？你让它工作了吗？
请对这个有趣的话题进行更新。与 Backbone 的模型和集合相比，Angular 与 restful 后端的接口能力很差。

标签： backbone.js angularjs

【解决方案1】：

例如上面的一个工作绑定... http://jsbin.com/ivumuz/2/edit

它演示了一种使用 AngularJS 处理 Backbone 模型的方法。但 setters/getters 连接会更好。

【讨论】：

我想这是对skaterdav85的回答
甜蜜的例子@tenphi

【解决方案2】：

想到了类似的想法，并提出了这个想法：为 ever 模型属性添加一个 getter 和 setter。

Backbone.ngModel = Backbone.Model.extend({
        initialize: function (opt) {
         _.each(opt, function (value, key) {
             Object.defineProperty(this, key, {
                 get: function () {
                     return this.get(key)
                  },
                 set: function (value) {
                     this.set(key, value);
                 },
                 enumerable: true,
                 configurable: true
             });
         }, this);
     }
 });

见小提琴：http://jsfiddle.net/HszLj/

【讨论】：

【解决方案3】：

我想知道是否有人也这样做过。在我最近/第一个 Angular 应用程序中，我发现 Angular 在模型和集合方面非常缺乏（除非我当然遗漏了一些东西！）。当然，您可以使用 $http 或 $resource 从服务器中提取数据，但是如果您想将自定义方法/属性添加到模型或集合中怎么办。例如，假设您有一系列汽车，并且您想要计算总成本。像这样的：

使用 Backbone 集合，这将很容易实现：

carCollection.getTotalCost()

但在 Angular 中，您可能必须将自定义方法包装在服务中并将您的集合传递给它，如下所示：

carCollectionService.getTotalCost(carCollection)

我喜欢 Backbone 方法，因为在我看来它读起来更简洁。不过，获得 2 路数据绑定很棘手。查看这个 JSBin 示例。

http://jsbin.com/ovowav/1/edit

当您编辑数字时，collection.totalCost 不会更新，因为 car.cost 属性没有通过 model.set() 设置。

相反，我基本上对模型和集合使用了自己的构造函数/“类”，从 Backbone.Model 和 Backbone.Collection 复制了 Backbone 的 API 子集，并修改了我的自定义构造函数/类，以便它可以处理 Angular 的数据绑定。

【讨论】：

我想这就是你所面临问题的答案:)jsbin.com/ivumuz/2/edit
根据您与谁交谈，服务的重点是抽象出处理数据的逻辑。然后控制器负责装饰视图。在这种情况下，您可能希望将解析、排序、转换数据的逻辑放入该控制器中。

【解决方案4】：

试试看restangular。

我还没有在任何地方实现它，但我几天前看到了一个关于它的演讲。它似乎以一种角度的方式解决了同样的问题。

视频：http://www.youtube.com/watch?v=eGrpnt2VQ3s

【讨论】：

【解决方案5】：

确实是有效的问题。

$resource 的当前实现存在很多限制，其中没有像 Backbone.Collection 这样的内部集合管理。在 Angular 中编写了我自己的集合/资源管理层（使用 $http，而不是 $resource）之后，我现在正在看看是否可以将大部分样板内部结构替换为骨干集合和模型。

到目前为止，获取和添加部分完美无缺并节省了代码，但是将这些主干模型（或其中的属性）绑定到输入上的 ng-models 以进行编辑尚未起作用。

@ericclemmons (github) 也做了同样的事情，让两人好好结婚 - 我会问他，让我的测试工作，然后发布结论......

【讨论】：

你在这方面取得了进展吗？
结果如何？
这方面有什么进展吗？如果这可行，我将不胜感激

【解决方案6】：

我也是这么想的——

这是用例：

salesforce mobile sdk（混合）有一个名为 smartstore/smartsync 的功能，它需要主干模型/集合，它会保存到本地存储以供离线访问。

您猜对了，我们希望将 angularjs 用于混合应用程序的其余部分。

有效的问题。

-Sree

【讨论】：

【解决方案7】：

您应该查看带有 parse here 的 angularJS 样板。 Parse 类似于骨干，但不完全是骨干。这就是我开始我的angularJS主干JS项目想法的地方

【讨论】：