Backbone.js - 如何在查看頁面上顯示數據？

Question

我正在使用backbone.js（AMD）和jQuery手機。我有問題在查看頁面上顯示數據。有時候html頁面運行不正常。我能做些什麼來解決我的問題？任何解決方案

courseModel

define(['underscore', 'backbone'], function(_, Backbone) { 

    var courseModel = Backbone.Model.extend({ 

    }); 
    return courseModel; 
}); 

courseCollection

define(['underscore', 'backbone', 'model/course/courseModel'], function(_, Backbone, courseModel) { 

    var courseCollection = Backbone.Collection.extend({ 
     model: courseModel, 
     url: "http://localhost:8888/impec-api/member/get_all_courses.php", 
     parse: function(data) { 
      return data.tbl_courses; 
     } 
    }); 
    return courseCollection; 
}); 

view.js

define(['jquery', 'underscore', 'backbone','model/course/courseCollection', 'text!modules/course/courseViewTemplate.html'], function($, _, Backbone, courseCollection,courseViewTemplate) { 
    var CourseView = Backbone.View.extend({ 
     //initialize template 
     template:_.template(courseViewTemplate), 
     initialize: function() { 
      this.$el.off(); 
      if (localStorage.studentId == null) { 
       window.location.replace("#login"); 
      } 
     }, 
     //render the content into div of view 
     render: function() { 
      var that = this; 
      this.collection = new courseCollection(); 
      this.collection.fetch({ 
       success: function(collection, response) { 
        that.$el.append(that.template({courses:that.collection.models})); 
        return that; 
       }, 
       error: function(collection, response) { 
        alert("error"); 
       } 
      }); 
      return this; 
     } 
    }); 
    return CourseView; 
}); 

HTML

<div data-role="header"> 
    <a href="#main">Back</a> 
    <h1>Course</h1> 
</div> 

<div data-role="content" > 

    <ul data-role="listview"> 
     <% _.each(courses, function(course) { %> 
      <li><%= course.get('name') %></li> 
     <% }); %> 
    </ul> 
</div> 

個輸出

非常感謝提前。

Answer 1

define(['jquery', 'underscore', 'backbone','model/course/courseCollection', 'text!modules/course/courseViewTemplate.html'], function($, _, Backbone, courseCollection,courseViewTemplate) { 
    var CourseView = Backbone.View.extend({ 
    //initialize template 
    template:_.template(courseViewTemplate), 
    initialize: function() { 
     this.$el.off(); 
     if (localStorage.studentId == null) { 
      window.location.replace("#login"); 
     } 
    }, 
    //render the content into div of view 
    render: function() {    
     var that = this; 
     this.collection = new courseCollection(); 
     this.collection.fetch({ 
      success: function(collection, response) { 
       var container = document.createDocumentFragment(); 
       _.each(collection, function(subview) { 
        container.appendChild(subview.render().el) 
       }); 
       that.$el.append(that.template(container)); 
      } 
     }); 
     return this; 
    } 
}); 
return CourseView; 
}); 

我不認爲你需要更多的_.each在你的模板..迴流會好得多