javascript - 在 Backbone.JS 中创建不更新 ID

Question

目前我正在开发一个 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 进行更新，这意味着我无法调用删除函数，因为这需要有效的 ID。

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

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

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

谢谢。

Answer 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]); 现在一切正常!