如何從外部json文件中獲取數據到骨幹視圖

我想通過訪問從json使用jquery-ajax填充的列表來呈現骨幹視圖。如何從外部json文件中獲取數據到骨幹視圖

我面臨的問題是，即使在ajax調用完成之前，頁面也會呈現。我不確定是否可以在成功數據中包含主幹模型/視圖，以便在獲取數據後使其工作。如果我替換ajax調用並將靜態json寫入一個javascript變量，那麼這將工作正常。但是我無法通過外部電話獲得此功能。

我使用的方法可能不正確，我想要一個正確的方法來使用主幹。

代碼如下：

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script class="jsbin" src="http://documentcloud.github.com/underscore/underscore-min.js"></script> 
<script class="jsbin" src="http://documentcloud.github.com/backbone/backbone.js"></script> 

<script> 
      var stages; 

       $.ajax({ 
        type: 'GET', 
        url: 'test.php', 
        async:'false', 
        data: { get_param: 'value' }, 
        success: function (data) { 
         window.stages = data; 
         alert(stages); 
        } 
       }); 


      alert(stages); 


      // StageModel: no need to extend if you're not adding anything. 
      StageModel = Backbone.Model; 

      // StageCollection 
      StageCollection = Backbone.Collection.extend({ 
       model: StageModel 
      }); 

      // create view for list of stages 
      StageCollectionView = Backbone.View.extend({ 

      el: $("#stageNav"), 

      initialize: function() { 
       this.collection.bind('add', this.createStageListItem, this); 
      }, 

      events: { 
       'click .stageListItem' : 'selectStage' 
      }, 

      createStageListItem: function(model) { 
       this.$("#stageList").append("<tr><td id=\"" + model.cid + "\" class='stageListItem'>" + model.get('label') +'</td><td>-'+ model.get('message') + "</td></tr>"); 
      }, 

      selectStage: function(event) { 
       var cid = $(event.target).attr('id'); 
       this.trigger('new-stage', this.collection.getByCid(cid)); 
      },    

      render: function() { 
       var self = this; 
       this.collection.each(function(model) { 
       self.createStageListItem(model); 
       }); 
       return this; 
      } 

      }); 

      // StageView, 
      StageView = Backbone.View.extend({ 
       el: $("#stage"),    
       initialize: function(options) { 
        this.eventSource = options.newStageEventSource; 
        this.eventSource.bind('new-stage', this.loadAndRenderStage, this); 
       }, 

       load: function(model) { 
        this.model = model; 
        return this; 
       }, 

       render: function() { 
        $("#stageLabel").html(this.model.get('label')); 
        $("#stageMsg").html(this.model.get('message')); 
       }, 

       loadAndRenderStage: function(stage) { 
        this.load(stage); 
        this.render(); 
       } 
      }); 

      var stageCollection = new StageCollection(stages); 

      var stageCollectionView = new StageCollectionView({ 
      collection: stageCollection 
      }); 

      var stageView = new StageView({ 
      newStageEventSource: stageCollectionView 
      }); 

      stageCollectionView.render(); 

</script> 

<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 

<body> 

<div id="stageNav"> 
<table id="stageList"> 
</table> 
</div> 

<div id="stage"> 
<h3 id="stageLabel"></h3> 
<p id="stageMsg"></p> 
</div> 

</body> 

</html>

非常感謝

羅伊

來源

2013-06-25 Roy M J

以下是我已經爲我的應用程序來完成。

用的API（DB文件路徑）的正確路徑創建模型

//Models var ClientReportsModel = Backbone.Model.extend({ urlRoot: App.apiUrl+'tracking/GetClientReport', }); var clientReportsModel = new ClientReportsModel();

然後在視圖簡單地叫出模型就像jQuery的AJAX調用：

//View 
var ClientReportsView = Backbone.View.extend({   
    render: function(sd,ed,uid) { 
     var that = this; 

      var sendData = { 
       "uid" : uid, 
       "pn" : 0, 
       "sd" : sd, 
       "ed" : ed 
      } 
      //sendData is the input for the ajax call 

      var clientReportsModel = new ClientReportsModel(); 
      clientReportsModel.save(sendData, { 
       success: function (model, result) { 
        alert("Success");      
       }, 
       error: function (res) { 
        alert("Fail"); 
       } 
      }); 
    } 
});

就像正常的jquery-ajax調用一樣，您將在success callback function中得到結果。

希望這會有所幫助。

來源

2013-10-09 12:13:44

如何從外部json文件中獲取數據到骨幹視圖

回答

相關問題