骨幹視圖沒有正確更新

我想要顯示一個列表，一旦列表中的某個項目被點擊，我想要隱藏列表，並檢索並顯示項目的詳細信息。骨幹視圖沒有正確更新

鼠標點擊激發，詳細信息從REST Web服務中檢索，並且項目列表被隱藏。問題在於，在刷新頁面之前，項目詳細信息不會顯示。我不明白我做錯了什麼。

這裏是我的代碼的例子：如果我改變路線細節修改＃項目列表，而不是＃項目，細節

<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

骨幹視圖沒有正確更新

回答

相關問題