Question

Backbone（以及几乎相同的.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();
 });

这给出了一个无法在Backbone中调用未定义错误的ajax方法。我读了那个

不应使用Fetch来填充页面加载时的集合 - 加载时所需的所有模型都应该已经被引导到位。

因此我尝试在模型创建时对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？

Answer 1

您的提示位于：cannot call ajax of undefined

Backbone不提供ajax方法。它依赖于一个库，使用jQuery或Zepto（两者都具有相同的Ajax调用API）。你必须在你的脚本中包含jQuery。

Backbone只是一个用于管理复杂数据关系的库，这是一种非常强大的组织工具，但就是这样。它不能替代jQuery这样的DOM操作工具。如果您在服务器上使用Backbone，例如使用Node.js，您必须覆盖模型和集合的同步方法以使用除Ajax之外的其他东西 - 大概是，您将保存到某种类型的数据库

Answer 2

为了防止其他人遇到此问题并遇到此帖子，似乎导入库的订单非常重要。首先是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>

Answer 3

确保加载了jQuery或Zepto - Backbone.sync()方法最终会调用$.ajax()，这是您收到错误的地方，这意味着$未定义。

尝试在页面加载时填充主干集合

3 个答案: