AngularJS와 함께 백본 모델 사용

AngularJS와 함께 백본 모델 사용

---

최근에 저는 Backbone.js와 AngularJS의 차이점과 유사점에 대해 생각하고있었습니다.

Backbone에서 정말 편리하다고 생각하는 것은 Backbone-Models와 Backbone-Collections입니다. urlRoot를 설정하기 만하면 Ajax를 통한 백엔드 서버와의 통신이 기본적으로 작동합니다.

AngularJS 애플리케이션에서 백본 모델과 컬렉션 만 사용하는 것이 가능하지 않습니까? 따라서 AngularJS를 사용한 양방향 데이터 바인딩과 백본 모델 및 컬렉션을 통해 서버 측 (또는 기타 스토리지 옵션)에 대한 편리한 액세스를 모두 활용할 수 있습니다.

빠른 인터넷 검색은이 사용 시나리오를 제안하는 사이트를 찾지 못했습니다. 모든 리소스는 하나 또는 다른 프레임 워크 사용에 대해 설명합니다.

누군가 AngularJS와 함께 Backbone-Models 또는 Collections를 사용한 경험이 있습니까? 그들은 서로를 훌륭하게 보완하지 않을까요? 내가 뭔가 빠졌나요?

---

위의 예에 대한 작업 바인딩 ... http://jsbin.com/ivumuz/2/edit

AngularJS로 백본 모델을 다루는 방법을 보여줍니다. 하지만 세터 / 게터 연결이 더 좋을 것입니다.

---

비슷한 아이디어를 염두에두고이 아이디어를 내놓았습니다. 모델 속성에 대한 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/

---

누구도이 일을했는지 ​​궁금합니다. 가장 최근 / 첫 번째 앵귤러 앱에서 Angular는 모델과 컬렉션이 상당히 부족하다는 것을 알았습니다 (물론 뭔가를 놓치고 있지 않는 한!). 물론 $ http 또는 $ resource를 사용하여 서버에서 데이터를 가져올 수 있지만 사용자 지정 메서드 / 속성을 모델 또는 컬렉션에 추가하려면 어떻게해야합니까? 예를 들어 자동차 컬렉션이 있고 총 비용을 계산하려고한다고 가정합니다. 이 같은:

백본 컬렉션을 사용하면 구현하기가 매우 쉽습니다.

carCollection.getTotalCost()

그러나 Angular에서는 다음과 같이 사용자 지정 메서드를 서비스에 래핑하고 컬렉션을 전달해야 할 것입니다.

carCollectionService.getTotalCost(carCollection)

내 의견으로는 더 깔끔하게 읽을 수 있기 때문에 Backbone 접근 방식을 좋아합니다. 하지만 양방향 데이터 바인딩을 얻는 것은 까다 롭습니다. 이 JSBin 예제를 확인하십시오.

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

숫자를 편집 할 때 car.cost 속성이 model.set ()을 통해 설정되지 않기 때문에 collection.totalCost가 업데이트되지 않습니다.

대신, 기본적으로 모델 및 컬렉션에 대해 자체 생성자 / "클래스"를 사용하고 Backbone.Model 및 Backbone.Collection에서 Backbone API의 하위 집합을 복사하고 Angular의 데이터 바인딩과 함께 작동하도록 사용자 지정 생성자 / 클래스를 수정했습니다.

---

restangular를 살펴보십시오 .

나는 그것을 어디에도 구현하지 않았지만 며칠 전에 그것에 대한 강연을 보았다. 같은 문제를 각진 방식으로 해결하는 것 같습니다.

동영상 : http://www.youtube.com/watch?v=eGrpnt2VQ3s

---

확실히 유효한 질문입니다.

Lot of limitations with the current implementation of $resource, which among others doesn't have internal collection management like Backbone.Collection. Having written my own collection/resource management layer in angular (using $http, not $resource), I'm now seeing if I can substitute much of the boilerplate internals for backbone collections and models.

So far the fetching and adding part is flawless and saves code, but the binding those backbone models (or the attributes within, rather) to ng-models on inputs for editing is not yet working.

@ericclemmons (github) has done the same thing and got the two to marry well - I'll ask him, get my test working, and post the conclusion...

---

I was wondering the same-

This is the use-case:

salesforce mobile sdk (hybrid) has a feature called smartstore/smartsync, that expects backbone models/collection ,which gets saved to local storage for offline access .

And you guessed it right, we want to use angularjs for rest of the hybrid app.

Valid question.

-Sree

---

You should look at the angularJS boilerplate with parse here. Parse is backbone like, but not exactly backbone. Thats where im starting my idea of a angularJS backboneJS project

ReferenceURL : https://stackoverflow.com/questions/16895758/using-backbone-models-with-angularjs