2011-08-31 64 views
1

骨幹(以及相當多的.js)新手。試圖在客戶端學習MVC架構。嘗試在頁面加載時填充骨幹網集合

的目標是重新創建的jQuery功能

$.getJSON('/application/listsurveys', function(data) { 

     $.each(data.surveys,function(i,item) { 
      $('#surveyListTable').append('<tr onMouseover="onMouseOverHandler()" onMouseout="onMouseOutHandler()" >' 
          + '<td id="testData">'+ item.title + '<br>ID ' + item.surveyId + '</td>' 
          + '<td>' + new Date(item.uploadDate).toLocaleDateString() + '</td>' 
          + '<td>' + item.ndgUser.username + '</td>' 
          + '<td><a href="">' + item.resultCollection.length + '</a></td>' 
          + '<td width=250><img src="images/back.jpg" id=Tools></td>' 
          + '</tr>'); 
              }); 
      }); 

,但我不能讓過去的JSON加載 - 我有什麼到目前爲止,這是

var Survey = Backbone.Model.extend({ 
    initialize: function(){ 
      console.log("A single survey model was created"); 
          } 
    }); 

var SurveyList = Backbone.Collection.extend({ 
    initialize: function(){    
      console.log("A survey collection was created"); 
          }, 
    url :'/application/listsurveys', 
    model: Survey 
}); 


var App = { 
    init: function() { 
      var surveys = new SurveyList({}); 
      surveys.fetch({success: loadApp});  
     } 
}; 

// kick off the application 
$(document).ready(function() { 
    App.init(); 
}); 

它給出了一個不能調用AJAX方法未定義的骨幹錯誤。我讀了

訪存不應該用於在頁面加載時填充集合 - 加載時需要的所有模型應該已經被引導到位。

所以我想硬編碼在模型創建的JSON像

var App = { 
init: function() { 
     var survey = new Survey({"surveys":[{"available":1,"id":1,"ndgUser":{"username":"admin"},"resultCollection":[],"surveyId":"1263929563","title":"Demo Survey","uploadDate":1311603000000}]}); 
     var surveyObject = survey.get('surveys'); 
     available = surveyObject[0].available; 
     alert(available);  
    } 

};

這會提醒預期的結果1.如何從此處移動並在頁面加載時拉出此JSON?

回答

1

你的暗示是在這裏:cannot call ajax of undefined

骨幹不提供的AJAX方法。它依賴於一個庫,使用jQuery或Zepto(兩者都具有相同的Ajax調用API)。你必須在你的腳本中包含jQuery。

Backbone只是一個管理複雜數據關係的庫,一種組織工具 - 一個非常強大的工具,但就是這樣。它不能替代像jQuery這樣的DOM操作工具。如果您在服務器上使用Backbone,例如使用Node.js,則必須覆蓋模型和集合的同步方法以使用Ajax以外的其他方法 - 大概您將保存到某種類型的數據庫。

0

確保您已經jQuery的或加載的Zepto - Backbone.sync()方法最終調用$.ajax()這是你在哪裏得到你的錯誤,這只是意味着$是不確定的。

1

萬一別人有這個問題,並遇到這個職位似乎爲了庫進口是非常重要的。首先是JQuery,然後是下劃線,然後是主幹。類似於

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="javascripts/libs/jquery-1.6.2.min.js"><\/script>')</script> 

    <!-- Grab utility-belt library underscore.js, with a protocol relative URL; fall back to local if offline --> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js"></script> 
    <script>window.jQuery || document.write('<script src="javascripts/libs/underscore-1.1.7.min.js"><\/script>')</script> 

    <!-- Grab backbone.js (Google, we host the other stuff OK), with a protocol relative URL; fall back to local if offline--> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script> 
    <script>window.jQuery || document.write('<script src="javascripts/libs/backbone-0.5.3.min.js"><\/script>')</script>