使用AngularJS的Backbone模型

Question

最近我在考虑Backbone.js和AngularJS之间的差异和相似之处.

我在Backbone中发现非常方便的是Backbone-Models和Backbone-Collections.您只需设置urlRoot,然后通过Ajax与后端服务器的通信基本上可以正常工作.

是不是可以只使用AngularJS应用程序中的Backbone-Models和Collections？因此,我们将充分利用AngularJS双向数据绑定,并通过Backbone-Models和Collections方便地访问服务器端(或其他存储选项).

一个快速的互联网搜索没有出现任何建议这种使用场景的网站.所有资源都要么谈论使用一个或另一个框架.

有人有使用AngularJS的Backbone-Models或Collections的经验.他们不会很好地相互补充吗？我缺少什么？

Answer 1

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

它演示了使用AngularJS解决Backbone模型的方法.但是setter/getters连接会更好.

Answer 2

有一个类似的想法,想出了这个想法:添加一个getter和setter for ever model属性.

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/

Answer 3

我想知道是否还有人这样做过.在我最近的/第一个有角度的应用程序中,我发现Angular在模型和集合中非常缺乏(除非我当然缺少一些东西!).当然,您可以使用$ http或$ resource从服务器提取数据,但如果要向模型或集合添加自定义方法/属性,该怎么办？例如,假设您有一系列汽车,并且您想要计算总成本.像这样的东西:

使用Backbone Collection,这很容易实现:

carCollection.getTotalCost()

但是在Angular中,您可能需要将自定义方法包装在服务中并将集合传递给它,如下所示:

carCollectionService.getTotalCost(carCollection)

我喜欢Backbone方法,因为它在我看来更干净.获得双向数据绑定虽然很棘手.看看这个JSBin示例.

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

编辑数字时,collection.totalCost不会更新,因为car.cost属性未通过model.set()设置.

相反,我基本上使用自己的构造函数/"类"用于模型和集合,从Backbone.Model和Backbone.Collection复制Backbone API的子集,并修改我的自定义构造函数/类,以便它可以与Angular的数据绑定一起使用.

Answer 4

试着看看restangular.

我没有在任何地方实现它,但几天前我看到了它的谈话.它似乎以有角度的方式解决了同样的问题.

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

Answer 5

肯定是有效的问题。

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

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

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