私は、スリム、backbone.js、および MySQL バックエンドを備えた jquery mobile を使用してアプリを開発しています。
ワークフローは次のとおりです。
1) ユニ モジュールを検索します。2) 一致するモジュールをリストします。3) モジュールの詳細ページを選択して表示します。4) モジュールに関連する講師を一覧表示します。5) 講師を選択して表示します。
手順 1 ~ 4 を完了しましたが、講師の詳細ページを表示できません。ID を API 呼び出しに間違って渡しているか、ルーティングがめちゃくちゃになっている可能性があります。
私の index.php には、API 呼び出しのリストがあります。
$app = 新しいスリム();
$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');
最後の 2 つは、モジュールに関連付けられた講師のリストを取得し、それらをタップすると個々の講師を取得して詳細を表示することに関連しています。
getLecturers は機能し、参照用にここにあります。
function getLecturers($id) { $sql = "l.staffNumber、l.firstName、l.lastName、l.moduleNo1、l.moduleNo2、l.email、m.moduleNoをlecturetable l、moduletable mから選択 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 fromlecturetable 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" },
および一致する moduleLecturers およびlecturerDetails関数:
moduleLecturers:function (id) { var module = new Module({id:id}); module.lecturers.fetch(); this.changePage(new ModuleLecturersPage({model:module.lecturers})); }、
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.Lectorers = Backbone.Model.extend({
urlRoot:"../api/lecturers", initialize:function () { this.lecturers = new lecturersCollection(); this.lecturers.url = '../api/modules/' + this.id + '/lecturers'; }
});
window.lecturersCollection = Backbone.Collection.extend({
model:Lecturers, url:"../api/lecturers",
});
//新着
window.Lecturer = Backbone.Model.extend({
urlRoot:"../api/lecturer",
});
および、表示されていない 'lecturer-details' 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 %>/#lecturers/<%= staffNumber %>'
ブラウザの URL は正しいようですが (...jquerymobile/#modules/999003/#lecturers/123001)、講師の詳細ページが表示されません。
私はこれで数日間頭を悩ませてきました - 誰かが場違いなことを見つけることができれば、私はそれを大いに感謝します!