백본보기가 제대로 업데이트되지 않습니다.

목록을 표시하고 목록의 항목을 클릭하면 목록을 숨기고 항목의 세부 정보를 검색 및 표시하고 싶습니다.백본보기가 제대로 업데이트되지 않습니다.

마우스 클릭이 발생하고 세부 정보가 REST 웹 서비스에서 검색되고 항목 목록이 숨겨집니다. 문제는 페이지를 새로 고칠 때까지 항목 세부 정보가 나타나지 않는다는 것입니다. 나는 내가 뭘 잘못하고 있는지 알 수 없다.

여기 내 코드의 예 :

<html> 
<head> 
    <title>Backbone Test</title> 
    <script type="text/javascript" src="js/lib/jquery-1.7.1-min.js"></script> 
    <script type="text/javascript" src="js/lib/underscore-min.js"></script> 
    <script type="text/javascript" src="js/lib/backbone-min.js"></script> 
</head> 

<body> 

<div>VIN Search List:</div> 
<div id="item-list" /> 
<div id="item-details" /> 

<script type="text/javascript"> 
$(function() 
{ 
    var Item = Backbone.Model.extend({ 
     urlRoot: "rest/search", 
     defaults: { 
      "uid": "" 
     } 
    });  

    var Items = Backbone.Collection.extend({ 
     model: Item, 
     url: "rest/search/", 
    }); 

    var ItemDetail = Backbone.Model.extend({ 
     urlRoot: "rest/search/details", 
     defaults: { 
      "uid": "", 
      "details": "" 
     }, 

     url : function() { 
      return this.id ? this.urlRoot + '/' + this.id : this.urlRoot; 
     } 
    });  

    var ListView = Backbone.View.extend(
    { 
     tagName: "ol", 

     initialize: function() 
     { 
      _.bindAll(this, 'render'); 
      this.model.bind("destroy", this.close, this); 
     }, 

     render: function() 
     { 
      _.each(this.model.models, function(uid) { 
       $(this.el).append(new ItemView({model:uid}).render().el); 
      }, this); 
      return this; 
     }, 

     close: function() 
     { 
      $(this.el).unbind(); 
      $(this.el).remove(); 
     }, 
    }); 

    var ItemView = Backbone.View.extend(
    { 
     tagName: "li", 

     template: _.template("<%= uid %>"), 

     events: { "click": "showDetails" }, 

     initialize: function() 
     { 
      _.bindAll(this, 'render'); 
      this.model.bind("change", this.render, this); 
      this.model.bind("destroy", this.close, this); 
     }, 

     render: function(eventName) 
     { 
      $(this.el).html(this.template(this.model.toJSON())); 
      return this; 
     }, 

     close: function() 
     { 
      $(this.el).unbind(); 
      $(this.el).remove(); 
     }, 

     showDetails: function() 
     { 
      app.navigate("details/" + this.model.get("uid"), {trigger: true}); 
      return false; 
     }, 
    }); 

    var DetailsView = Backbone.View.extend(
    { 
     tagName: "ul", 

     template: _.template("<li><%= uid %></li><li><%= details %></li>"), 

     initialize: function() 
     { 
      _.bindAll(this, 'render'); 
      this.model.bind("change", this.render, this); 
      this.model.bind("destroy", this.close, this); 
     }, 

     render: function(eventName) 
     { 
      $(this.el).html(this.template(this.model.toJSON())); 
      return this; 
     }, 

     close: function() 
     { 
      $(this.el).unbind(); 
      $(this.el).remove(); 
     }, 
    }); 

    var AppRouter = Backbone.Router.extend({ 

     routes: 
     { 
      "": "list", 
      "details/:uid": "Details" 
     }, 

     list: function() 
     { 
      var self = this; 
      this.itemList = new Items(); 
      this.itemList.fetch(
      { 
       success: function() 
       { 
        self.listView = new ListView({model: self.itemList}); 
        $('#item-list').html(self.listView.render().el); 
       } 
      }); 
     }, 

     Details: function(uid) 
     { 
      if (this.lListView) this.listView.close(); 

      var self = this; 
      this.details = new ItemDetail({id: uid}); 
      this.details.fetch(
      { 
       success: function() 
       { 
        self.detailsView = new DetailsView({model: self.details}); 
        $('#item-details').html(self.detailsView.render().el); 
       } 
      }); 
     }, 

    }); 

    // Start up 
    var app = new AppRouter(); 
    Backbone.history.start(); 
}); 
</script>

출처

2012-12-31 jhsheets

세부 경로가 실행되면 페이지를 새로 고칠 때까지 DetailsView가 렌더링되지 않습니다. – jhsheets

그래, 성공이 불러옵니다. – jhsheets

내가 대신 # 항목 - 세부 사항 # 항목 목록을 수정하는 세부 경로를 변경하는 경우, 모든 것이 제대로 작동합니다.

~~# item-list가 원래 기본 경로에서 수정 된 요소이므로 계층 구조 외부에있는 요소를 수정할 수 없다고 추측합니다. 이 행동을 이해하고 싶습니다.~~

Blargh. # item-details 요소의 표시를 수동으로 토글하여 요소를 렌더링해야하는 것처럼 보입니다. 나는 왜 기본 경로가 다르게 행동하는지 아직 확실하지 않지만 큰 문제는 아닙니다.

 this.details.fetch(
     { 
      success: function() 
      { 
       self.detailsView = new DetailsView({model: self.details}); 
       $('#item-details').html(self.detailsView.render().el); 
       $('#item-details').css("display", "block"); // FORCE DISPLAY 
      } 
     });

출처

2013-01-02 19:28:09 jhsheets

백본보기가 제대로 업데이트되지 않습니다.

답변

관련 문제