在 Backbone.JS 中创建不会更新 ID答案

【问题标题】：Create in Backbone.JS doesn't update ID在 Backbone.JS 中创建不会更新 ID
【发布时间】：2015-10-26 08:01:43
【问题描述】：

目前我正在开发一个 Backbone.js 待办事项列表应用程序。我正在用 Backbone 构建前端，我正在用 PHP 和 MySQL 构建我的后端。

我已经设法构建了一个保存和删除功能，但目前我遇到了一个问题：当我保存模型时，模型没有 ID，并且被 Backbone 分配了一个临时 ID。然后当我保存模型时，得到服务器分配的 ID，服务器返回新模型。

这是我的模型和收藏代码：

app.TodoModel = Backbone.Model.extend({
    idAttribute: "ID",
    defaults: {
        "title": "Do me!",
        "date": "24-06-1992",
        "completed": false
    }
});

app.TodoCollection = Backbone.Collection.extend({
    model: app.TodoModel,
    url: '/src/todos.php'
});

这是我用来创建模型的代码：

app.AppView = Backbone.View.extend({
    el: '#todoApp',
    initialize: function(){
        this.input = this.$('#addTodo');
        this.todoCollection = new app.TodoCollection(); // Create collection

        this.todoCollection.on('reset', this.addAll, this);
        this.todoCollection.on('add', this.addOne, this);

        this.todoCollection.fetch();
    },
    events: {
        'keypress #addTodo': 'createTodo'
    },
    addOne: function(todo){
        var view = new app.TodoView({model: todo});
        $('#todoList').append(view.render().el);
    },
    addAll: function(){
        console.log('reset');
        this.$('#todoList').html(''); // clean the todo list
        this.todoCollection.each(this.addOne, this);
    },
    createTodo: function(e){
        if (e.which !== 13 || !this.input.val().trim()) { // ENTER_KEY = 13
            return;
        }
        this.todoCollection.create(this.newAttributes(), {
                wait:true,
                success: function(model, response) {
                    console.log("Added todo");
                    console.log(response);
                },  
                error: function(model, response) {
                    console.log("Adding failed");
                    console.log(response);
                }
        }),
        this.input.val(''); // clean input box
    },
    newAttributes: function(){
        return {
            title: this.input.val().trim(),
            date: new Date(),
            completed: false
        }
    }
});

到目前为止还不错吧？但现在问题开始了。即使我在创建中使用wait: true，也会使用旧模型数据。所以 ID 不会用新 ID 更新，这意味着我不能调用 delete 函数，因为这需要一个有效的 ID。

日期显示也不同，这是您首次添加待办事项的日期：MON OCT 26 2015 08:59:22 GMT+0100 (CET)，这是您刷新页面的日期：2015-10-26。这可能也与使用旧模型数据有关。

我的应用程序托管在这里：http://todoapp.lusenet.com/

TL;DR：模型在服务器上创建并保存，但前端不使用返回的模型，而是使用旧模型。如何使用返回的模型数据？

谢谢。

【问题讨论】：

标签： javascript php jquery mysql backbone.js

【解决方案1】：

我想通了，问题出在我从服务器返回的内容上。这是我使用的代码：

$addTodoQuery = "INSERT INTO todos (title,date,completed) VALUES ('$title','$date','$completed')";
if(mysqli_query($con,$addTodoQuery)){
    $ID = mysqli_insert_id($con);
    $getTodoQuery = "SELECT * FROM todos WHERE ID='$ID'";
    $todos = mysqli_query($con,$getTodoQuery) or die("error"); // http://us3.php.net/manual/en/mysqli.query.php
    while ($todo = mysqli_fetch_assoc($todos)) {
        $rows[] = $todo;
    }
    print_r(json_encode($rows));
} else {
    echo "Fail";
}

这样打印了一个包含一个对象的数组，而 Backbone 只需要一个对象。所以我将print_r(json_encode($rows)) 更改为echo json_encode($rows[0]);，现在一切正常！

【讨论】：