Backbone.js 如何与 PHP 一起使用

Backbone.js 是一个轻量级的JavaScript框架，被广泛应用于前端开发中，它提供了一种结构化的方式来组织和管理网页应用的数据。与此同时，PHP 是一种流行的服务器端脚本语言，用于处理网页表单数据和生成动态网页内容。本文将介绍如何将 Backbone.js 与 PHP 结合使用，以实现更高效的前后端交互。

javascript
// 创建一个待办事项模型
var Todo = Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false
  }
});
// 创建一个待办事项视图
var TodoView = Backbone.View.extend({
  tagName: 'li',
  template: _.template($('#todo-template').html()),
  render: function() {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});
// 创建一个待办事项集合
var TodoList = Backbone.Collection.extend({
  model: Todo
});
// 创建一个待办事项列表视图
var TodoListView = Backbone.View.extend({
  el: $('#todo-list'),
  initialize: function() {
    this.collection = new TodoList();
    this.render();
  },
  render: function() {
    this.collection.each(function(todo) {
      var todoView = new TodoView({ model: todo });
      this.$el.append(todoView.render().el);
    }, this);
  }
});
// 创建一个待办事项列表视图实例
var todoListView = new TodoListView();

php
// 从前端获取待办事项数据
$data = json_decode(file_get_contents('php://input'), true);
// 连接数据库
$mysqli = new mysqli('localhost', 'username', 'password', 'database');
// 插入待办事项数据到数据库
$stmt = $mysqli->prepare("INSERT INTO todos (title, completed) VALUES (?, ?)");
$stmt->bind_param('si', $data['title'], $data['completed']);
$stmt->execute();
// 返回成功响应
$response = array('success' => true);
echo json_encode($response);
// 关闭数据库连接
$stmt->close();
$mysqli->close();
?>

javascript
var Todo = Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false
  },
  
  urlRoot: 'save_todo.php'  // 指定保存模型数据的 PHP 文件
});
var TodoView = Backbone.View.extend({
  // ...
  events: {
    'click .add-todo': 'addTodo'
  },
  addTodo: function() {
    var title = this.$('.todo-input').val();
    var todo = new Todo({ title: title });
    todo.save();  // 将模型数据保存到后端
    this.$('.todo-input').val('');
    this.render();
  },
  // ...
});