我正在使用带有 MySQL 后端的 slim、backbone.js 和 jquery mobile 开发一个应用程序。
工作流程大致如下:
1) 搜索一个 uni 模块。2) 列出匹配的模块。3) 选择并查看模块详情页面。4) 列出与该模块相关的讲师。5) 选择并查看讲师。
我完成了第 1 步到第 4 步,但无法显示讲师详细信息页面。我想我可能将 id 传递给 API 调用错误,或者我的路由搞砸了。
在我的 index.php 中,我有一个 API 调用列表:
$app = new Slim();
$app->get('/modules', 'getModules'); $app->get('/modules/:id', 'getModule'); $app->get('/modules/search/:query', 'getModulesByName'); $app->get('/modules/:id/students', 'getStudents'); $app->get('/modules/:id/lecturers', 'getLecturers'); $app->get('/modules/lecturers/:id/lecturer', 'getLecturer');
最后两个涉及拉取与模块关联的讲师列表,然后在您点击他们时拉出单个讲师,显示详细信息。
getLecturers 有效,在这里供参考:
function getLecturers($id) { $sql = "select l.staffNumber, l.firstName, l.lastName, l.moduleNo1, l.moduleNo2, l.email, m.moduleNo from Lecturertable l, moduletable m where m.moduleNo= :id AND (l.moduleNo1=:id OR l.moduleNo2=:id)";
try { $db = getConnection(); $stmt = $db->prepare($sql); $stmt->bindParam("id", $id); $stmt->execute(); $lecturer = $stmt->fetchAll(PDO::FETCH_OBJ); $db = null; if (!isset($_GET['callback'])) { echo json_encode($lecturer); } else { echo $_GET['callback'] . '(' . json_encode($lecturer) . ');'; } } catch(PDOException $e) { echo '{"error":{"text":'. $e->getMessage() .'}}'; } }
getLecturer(单人)在这里:
function getLecturer($id) { $sql = "select l.staffNumber, l.firstName, l.lastName, l.moduleNo1, l.moduleNo2, l.email from Lecturertable l where l.staffNumber=:id";
try { $db = getConnection(); $stmt = $db->prepare($sql); $stmt->bindParam("id", $id); $stmt->execute(); $lecturer = $stmt->fetchObject(); $db = null; if (!isset($_GET['callback'])) { echo json_encode($lecturer); } else { echo $_GET['callback'] . '(' . json_encode($lecturer) . ');'; } } catch(PDOException $e) { echo '{"error":{"text":'. $e->getMessage() .'}}'; } }
这是我在 main.js 中的路线:
var AppRouter = Backbone.Router.extend({
routes:{ "":"list", "list":"list", "modules/:id":"moduleDetails", "modules/:id/students":"moduleStudents", "modules/:id/lecturers":"moduleLecturers", "modules/:id/lecturers/:id/lecturer":"lecturerDetails" },
以及匹配模块Lecturers 和lecturerDetails 函数:
moduleLecturers:function (id) { var module = new Module({id:id}); 模块.讲师.fetch(); this.changePage(new ModuleLecturersPage({model:module.lectures})); },
lecturerDetails:function (id) { var lecturer = new Lecturer({id:id}); var self = this; module.lecturers.lecturer.fetch({ success:function (data) { self.changePage(new LecturerView({model:data})); } }); },
然后我有 Lecturers 和 Lecturer 模型,以及 Lecturers 集合:
window.Lecturers = Backbone.Model.extend({
urlRoot:"../api/lecturers", initialize:function () { this.lecturers = new lecturersCollection(); this.lecturers.url = '../api/modules/' + this.id + '/lecturers'; }
});
window.lecturesCollection = Backbone.Collection.extend({
model:Lecturers, url:"../api/lecturers",
});
//新的
window.Lecturer = Backbone.Model.extend({
urlRoot:"../api/lecturer",
});
以及指向“讲师详细信息”html模板的讲师视图,该模板未显示:
window.LecturerView = Backbone.View.extend({
initialize:function () { this.template = _.template(tpl.get('lecturer-details')); }, render:function (eventName) { $(this.el).html(this.template(this.model.toJSON())); return this; }
});
讲师列表项,当点击时应显示详细视图,包含一个链接:href='#modules/<%= moduleNo %>/#leturers/<%= staffNumber %>'
尽管 URL 在浏览器中似乎是正确的 (...jquerymobile/#modules/999003/#lecturers/123001),但讲师详细信息页面并未显示。
几天来我一直在用这个打破我的头 - 如果有人能发现任何不合适的地方,我将不胜感激!