将主干模型与AngularJS配合使用

Question

最近，我在思考Backbone.js和AngularJS之间的异同。

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

难道不可以在AngularJS应用程序中只使用主干模型和集合吗？因此，我们将两全其美:使用AngularJS进行双向数据绑定，并通过主干模型和集合方便地访问服务器端(或其他存储选项)。

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

是否有人有在AngularJS中使用主干模型或集合的经验。它们难道不能很好地互补吗？我是不是漏掉了什么？

Answer 1

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

它演示了一种使用AngularJS绕过主干模型的方法。但是setters/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应用程序中，我发现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的数据绑定一起工作。