Как получить данные из внешнего 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

//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-файла в базовый вид

ответ

Смежные вопросы