主干.js，视图和路由

Question

我正在使用 slim、backbone.js 和带有 MySQL 后端的 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 有效，供参考：

函数 getLecturers($id) { $sql = "选择 l.staffNumber, l.firstName, l.lastName, l.moduleNo1, l.moduleNo2, l.email, m.moduleNo 来自讲师表 l，模块表 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（单人）在此：

函数 getLecturer($id) { $sql = "选择 l.staffNumber, l.firstName, l.lastName, l.moduleNo1, l.moduleNo2, l.email 来自讲师表 l 其中 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.lecturersCollection = 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//#leturers/'

虽然 URL 在浏览器中似乎是正确的 (...jquerymobile/#modules/999003/#leturers/123001)，但讲师详细信息页面并未显示。

这几天我一直在琢磨这个问题——如果有人能发现任何不合适的地方，我将不胜感激！

Answer 1

您不能使用双标签，只需修复您的链接：

你有：

href='#modules/<%= moduleNo %>/#lecturers/<%= staffNumber %>'

正确的必须是：

href='#modules/<%= moduleNo %>/lecturers/<%= staffNumber %>'