Backbone에서 단일 모델을 어떻게 가져 옵니까?


93

나는이 Clock백본에서 모델 :

var Clock = Backbone.Model.extend({});

에서 최신 정보가있는 인스턴스를 가져 오려고합니다 /clocks/123. 내가 시도한 몇 가지 :

"클래스"수준 메서드

Clock.fetch(123)
// TypeError: Object function (){ ... } has no method 'fetch'

인스턴스를 만든 다음 호출 fetch합니다.

c = new Clock({id: 123})
c.fetch()
// Error: A 'url' property or function must be specified

컬렉션

AllClocks컬렉션 리소스를 만들려고 시도 했습니다 (페이지에서 그런 것을 사용하지 않더라도).

var AllClocks = Backbone.Collection.extend({
  model: Clock,
  url: '/clocks/'
});
var allClocks = new AllClocks();
allClocks.fetch(123);
// returns everything from /clocks/

API 지원 시계 하나만 얻으려면 어떻게해야 합니까?


IMHO 컬렉션에 속합니다. Collection # fetchOne (id, callback)과 같은 것입니다.
Julian Maicher 2012

답변:


26

두 번째 접근 방식은 제가 사용한 접근 방식입니다. 시계 모델에 다음을 추가해보십시오.

url : function() {
  var base = 'clocks';
  if (this.isNew()) return base;
  return base + (base.charAt(base.length - 1) == '/' ? '' : '/') + this.id;
},

이 접근 방식은 http://www.mydomain.com/#clocks/123 과 같이 URL에 해시 뱅이있는 컨트롤러를 구현했다고 가정 하지만 아직 실행하지 않았더라도 작동합니다.



@makevoid 당신이 커피 스크립트에서 제공하는 예제를 만들 수 없었거나 문서의 Andrew 예제가 작동합니다. foo.url ()을 제공하고 예제를 제공 할 수 있습니까? 항상 함수 URL이 없다는 것을 알려줍니다.
Roberto Alarcon 2011

@makevoid 참조하는 방법은 모델이 컬렉션에서 생성 된 경우에만 작동하는 것 같습니다. 의 컬렉션을 확인하십시오 [collection.url]/[id].
Steven Devijver 2014 년

@makevoid 작동하는 링크를 제공해 주시겠습니까? 불행하게도,이 일이 지금은 고장
AlexNikolaev94

여기에 작업 링크가 있습니다 (문서를 옮겼습니다! 와우, 5 년이 지났습니다. 이런) : backbonejs.org/#Model-url-@StevenDevijver 가 맞습니다
makevoid

137

모델에서 urlRoot 를 지정해보십시오 .

문서에서 :

var Book = Backbone.Model.extend({urlRoot : '/books'});
var solaris = new Book({id: "1083-lem-solaris"});
solaris.fetch();

2
이것은 좋지만 때로는 모델을 다시 인스턴스화하고 싶지 않습니다. 동일한 모델에 대해 특정 항목을 가져 오려면 자동 설정을 수행 할 수 있습니다 currentBook.set('id', 13423, {silent:true}).. 이것도 작동하지만 이유를 잘 모르겠습니다 :currentBook.id = 13423
SimplGy

1
@SimplGy model.id는 본질적으로 model.attributes.id. 를 호출 model.set('id')하면 Backbone은 model.id지정한대로 설정 합니다. 그리고 model.id모델 별 URL을 만들 때 사용됩니다.
Lambart 2015

26

개인적으로 Model # url 메서드 문서를 따르는 것이 좋습니다.

model = new Model(id: 1)
view = new View(model: model) 
collection = new Collection([model])
model.fetch()

컬렉션에 컬렉션 URL을 추가해야합니다.

url: "/models"

뷰의 초기화 기능에서 다음을 수행하십시오.

this.model.bind("change", this.render)

이런 식으로 백본은 다음 URL을 사용하여 ajax 요청을 수행합니다.

"/models/1"

Collection # url 또는 Model # urlRoot를 수정하지 않고 모델이 업데이트되고 뷰가 렌더링됩니다.

참고 :이 예제는 커피 스크립트로 나왔지만 쉽게 var 문을 추가하여 js로 변환 할 수 있습니다.


분명히 이것은 작동하지 않습니다. 수행도 모델에 가져 호출 서버를 호출 (나 컬렉션)하게하지
리카르도 Amores

이것은 괜찮아 보이지만 컬렉션이 정말로 필요하지 않은 경우 컬렉션 라인이 어색해 보입니다.
Dingle

나는 이것을 작동시킬 수 없었다 : this.model.get ( 'field'). 모델이 하위 개체로 생성 된 것 같습니다
Muhaimin

1
나를 위해 잘 작동 (this.render, 이것은 "변화") this.model.bind
dmi3y

1
예 @UlysseBN, 당신은 VAR 문을 추가 할 수 있습니다 (2011 년이었다) {}내부에 ()전달 된 객체와 선택에 대한의 ;광고 라인의 끝
makevoid

12
var Person = Backbone.Model.extend({urlRoot : '/person/details'});
var myName = new Person({id: "12345"});
myName.fetch();

결과적으로 Ajax 요청을

URL http://[domainName]/person/details/id 

그리고 당신은 다시 JSON 응답을 받았습니다.

Enjoiiii !!!


2
이것은 @Hernan 같은 해결책
브렌든

0

... 모델 urlRoot에 후행 슬래시를 원하지 않는 경우 다음을 수행하십시오.

    url : function() {                        
        return this.urlRoot + this.id;
    },

0

컬렉션을 통해 개체에 액세스하고 항상 컬렉션에 유지해야합니다. 방법은 다음과 같습니다.

var AllClocks = Backbone.Collection.extend({
  model: Clock,
  url: '/clocks/'
});

var allClocks = new AllClocks();
my_clock = allClocks.add({id: 123});
my_clock.fetch()

2
당신은 그것을 모릅니다. 아마도 그가 요구하는 것은 시계 하나뿐 일 것입니다. 고객에게 사용자 레코드의 단일 모델을 제시하고 싶다고 가정 해 보겠습니다. 모든 사용자의 컬렉션에도 액세스 할 수 있어야합니까? 때때로 사람들은 사용 사례를 비공개로 유지하려고 노력하면서 조언이 필요합니다. 그냥 대답하세요.
Adrian Bartholomew 2015

0

RESTful URL을 사용하고 싶지만 기본 URL에 'postId'를 추가 할 수없는 이유를 이해할 수 없습니다.

var PostModel = Backbone.Model.extend({
    urlRoot: 'getBlogPost',
    defaults: {
        postTitle: "defaultTitle",
        postTime: "1970-01-01",
        postContent: "defaultContent",
        postAuthor: "anonymous"
    }
});

var post = new PostModel({
            postId: 1
        });
alert(post.url());

그런 다음 Model에서 'idAttribute'를 'postId'로 설정 한 후에야 올바른 URL을 얻을 수 있다는 것을 알고 있습니다. 이렇게 :

var PostModel = Backbone.Model.extend({
    idAttribute: 'postId',
    urlRoot: 'getBlogPost',
    defaults: {
        postTitle: "defaultTitle",
        postTime: "1970-01-01",
        postContent: "defaultContent",
        postAuthor: "anonymous"
    }
});
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.