2013-02-24 4 views
1

혼란스럽고 도움이 될 수 있습니다.backbone.js 속성 및 toJSON() 이해하기

나는 렌더링 함수 내에서 그리고 난이 다음과 같은 세 가지 디버그 라인 :

  console.debug(this.model); 
      foo = this.model.toJSON(); 
      console.debug(foo); 

첫 번째 줄의 출력은 서버에서 가져온 데이터와 모델 인스턴스 및 속성의 속성이 채워질 때 내가 기대하는 것과 함께.

그러나 두 번째 console.debug 호출에는 빈 객체가 들어 있습니다.

무엇을 제공합니까? 이 두 번째 비트 디버그 출력에는 동일한 속성이 포함되어 있지만 JSONified가 아니어야합니까?

아래 코드의 전체 비트는 다음과 같습니다

function get_race() { 

    var RaceModel = Backbone.Model.extend({ 
     urlRoot: api_root + 'race/1/?format=json', 

    }); 

    var RaceView = Backbone.View.extend({ 
     template: _.template('<h1>a template</h1><h2>desc: <%= year %></h2>'), 
     initialize: function() { 
      this.model = new RaceModel(); 
      this.model.fetch(); 
      this.render(); 
     }, 
     render: function() { 
      console.debug(this.model); 
      foo = this.model.toJSON(); 
      console.debug(foo); 
      this.$el.html(this.template(this.model)); 
      return this; 
     } 
    }); 


    var race_view = new RaceView({ el: $("#backbone_test") }); 
+0

어떤 브라우저를 사용하고 있습니까? 나는 Firefox/Firebug에서 이와 같은 작업을 수행하고이 모델의 –

+0

toJSON을 사용하여 모델 인스턴스의 속성 속성을 나타내는 객체를 반환해야합니다. 모델과 완전히 동일하지는 않습니다. 왜냐하면 모델 다른 속성과 메서드가 있으므로 속성을 보지 않아도 특별히보아야 할 내용을 말할 수는 없습니다. – kinakuta

+0

추가 할 사항 중 하나는 this.model을 템플릿 함수에 전달하지 말고 this.model.attributes를 전달하십시오 – kinakuta

답변

0

당신은 가능성이 가장 높은 로그의 결과의 속임수되고있다. 객체가 올바른 값으로 기록되는 이유는 console.log()가 기록 된 객체에 대한 참조를 유지하기 때문입니다. 이것은 다음과 같은 HTML 페이지를 사용하여 크롬에서 관찰 할 수있다 :로드 개발자 도구없이

<!doctype html> 
<html lang="en"> 
<head> 
<script type="text/javascript"> 
    var object = { title: null }; 
    console.log(object); 
    function update() { object.title = document.getElementById("title").value; } 
</script> 
</head> 
<body> 
    <input id="title" type="text" value="New title"/><br/> 
    <button onclick="update()">Update title</button> 
</body> 
</html> 
  1. 로드까지 크롬에서 페이지를.
  2. 자바 스크립트 콘솔을 열고 로깅 된 인스턴스의 값이 null인지 확인하십시오.
  3. 자바 스크립트 콘솔을 닫습니다.
  4. 버튼을 클릭하여 제목을 업데이트하십시오.
  5. 자바 스크립트 콘솔을 다시 엽니 다. 제목이 동일한 로그 라인 인 경우에도 새 값으로 제목이 업데이트됩니다.

보기를 렌더링하기 전에 값이로드되었는지 확인하려면 결과를 기다려야합니다. 개인적으로 나는 nEEbz 솔루션으로 갈 것입니다.

3

내가 모델이 인출되기 전에 그 호출되고 렌더링 무슨 일이 일어나고 있는지 생각합니다. 호출을 호출하고 렌더링 할 호출을 제거하기 전에이를 초기화해야합니다. 그 시점에서 거기에 아무것도 없기 때문에 그런 직선이라고 렌더링

this.listenTo(this.model, "change", this.render); 

는 this.model.toJSON() 하늘의 객체를 반환합니다. 하지만 디버거가 this.model을 가져올 때 참조를 표시하기 때문에이 코드를 업데이트하려고합니다.

요점을 증명하려면 console.log (JSON.stringify (this.model))와 같이 불변 인 것을 로깅 해보십시오. 당신의 코드를 가져

+4

경쟁 조건이있을 때 경주 모델이라는 이름의 반어 적 모델입니다.) –

0

변화 :

that = this 
this.model.fetch(
    success: function() { 
     that.render(); 
); 
관련 문제