2013-06-03 339 views
54

最近我在考慮Backbone.js和AngularJS之間的差異和相似之處。在AngularJS中使用骨幹模型

我在Backbone中找到的非常方便的是Backbone-Models和Backbone-Collections。您只需設置urlRoot,然後通過Ajax與後端服務器進行通信基本上可以工作。

不應該在AngularJS應用程序中使用Backbone-Models和Collections? 因此,我們將擁有與AngularJS的雙向數據綁定和通過骨幹模型和集合方便訪問服務器端(或其他存儲選項)的最佳方式。

快速的互聯網搜索沒有出現任何網站暗示這種使用情況。所有資源要麼談論使用一個框架,要麼使用其他框架。

有人有使用骨幹模型或集合與AngularJS的經驗。 它們不會很好地互補嗎?我缺少什麼?

+8

爲什麼你要使用骨幹模型,你有角度的資源,可以很容易地直接使用REST與服務器端模型集成 –

+0

嘗試玩與模型和集合與骨幹。由於Underscore的支持,這是非常容易上癮的。我認爲這個ng-Back的一個主要問題是getter和setter的事件問題 –

+4

這是怎麼回事?你有沒有得到它的工作? –

回答

4

確實有效的問題。

地塊與目前執行$資源,這其中包括不具有內部集合管理像Backbone.Collection限制。已經寫了我自己的收藏/資源管理層的角度(使用$ HTTP,而不是$資源),我現在看到的,如果我可以替代大部分模板內部的骨幹收集和模型。

到目前爲止,獲取和增加部分是完美無缺的,並且可以節省代碼,但結合這些骨幹模型(或內,而該屬性)到NG-模型上進行編輯的投入還沒有工作。

@ericclemmons(github上)做了同樣的事情,得到了兩嫁得好 - 我去問問他,拿我的測試工作,並張貼結論...

+2

你在這方面取得了進展嗎? – bjunix

+3

結果如何? –

+0

這方面的進展如何?我真的很感激它,如果這可以工作 – thejava

7

我想知道如果任何人有也是這樣做的。在我最近的/第一個角度的應用程序中,我發現Angular在模型和集合方面非常缺乏(除非我錯過了某些東西!)。當然,您可以使用$ http或$ resource從服務器獲取數據,但是如果您想將自定義方法/屬性添加到模型或集合中,該怎麼辦?例如,假設你有一系列汽車,並且你想計算總成本。事情是這樣的:

隨着骨幹集合,這將是很容易實現:

carCollection.getTotalCost() 

但棱角分明,你可能必須包裝在服務您的自定義方法和您的收藏傳遞給它是這樣的:

​​

我喜歡Backbone方法,因爲它在我看來更清晰。獲取2路數據綁定雖然很棘手。看看這個JSBin的例子。

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

當您編輯的數字,collection.totalCost不會更新,因爲car.cost性能沒有得到通過model.set設置()。

相反,我基本上是用我自己的構造函數/「類」模型和集合,複製從Backbone.Model和的中堅骨幹的API的一個子集。集合,並修改了我的自定義構造函數/類,以便它可以與Angular的數據綁定一起使用。

+1

我認爲這是你遇到的問題的答案:)http://jsbin.com/ivumuz/2/edit – Roylee

+0

根據你與誰交談,服務的重點是爲了抽象處理數據的邏輯。控制器然後負責裝飾視圖。在這種情況下,您會想要將解析,排序和轉換數據的邏輯放入該控制器。 – deadbabykitten

11

工作,例如上面結合... http://jsbin.com/ivumuz/2/edit

它演示了圍繞骨幹模型正與AngularJS的方式。 但setter/getters連接會更好。

+0

我想這是迴應skaterdav85的回答 – bjunix

+0

甜心的例子@tenphi –

9

心中有類似的想法,並與這個想法想出了: 添加只是一個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/

2

我想知道各項─

這是用例:

銷售人員移動SDK(混合)呼籲smartstore功能/智能同步,期望骨幹模型/集合,將其保存到本地存儲以便離線訪問。

你猜對了,我們希望爲其他混合應用程序使用angularjs。

有效的問題。

-Sree

2

你應該看看與解析here的angularJS樣板。解析是骨幹,但不完全是主幹。這就是我開始我的想法angularJS backboneJS項目