3

初めて backbone.js を使用しており、php および mysql と組み合わせて使用​​しているため、バックボーンを使用してデータベースからデータを送受信できますが、削除要求メソッドに問題があります。post と put のように request メソッドで送信されたデータにアクセスできません。POST と PUT は、このスクリプトで完全に機能します。問題があるのは削除だけです。

これが私のコードです。

helloWorld.js

(function($) {

var Item = Backbone.Model.extend({
    url: 'http://mysite.com/syncItem.php', 
    defaults: {
        part1: 'hello',
        part2: 'world',
    }
});

var List = Backbone.Collection.extend({
    model: Item 
});

var ItemView = Backbone.View.extend({
    tagName: 'li', 
    events: {
        'click span.swap': 'swap', 
        'click span.delete': 'remove'
    },

    initialize: function() {
        _.bindAll(this, 'render', 'unrender', 'swap', 'remove'); 

        this.model.bind('change', this.render); 
        this.model.bind('remove', this.unrender);
    },

    render: function() {
        $(this.el).html('<span style="color:black;">' + this.model.get('part1') +' '+this.model.get('part2')+'</span> &nbsp; &nbsp; <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap parts]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
        return this; 
    },

    unrender: function() {
        $(this.el).remove();
    },

    swap: function() {
        var swapped = {
            part1: this.model.get('part2'),
            part2: this.model.get('part1')  
        };
        this.model.set(swapped);
        this.model.sync("update", this.model);
    },

    remove: function() {
        this.model.sync("delete", this.model);  //deletes Item from server DB
        this.model.destroy(); //deletes Item from collection
    }
});

var ListView = Backbone.View.extend({
    el: $('div#backboneContainer'),  

    events: {
        'click button#add': 'addItem'   
    },

    initialize: function() {
        _.bindAll(this, 'render', 'addItem', 'appendItem');

        this.collection = new List(); 
        this.collection.bind('add', this.appendItem); 

        this.counter = 0;
        this.render();  
    },

    render: function() {
        var self = this;
        $(this.el).append("<button id='add'>Add List Item</button>");
        $(this.el).append("<ul></ul>");
    },

    addItem : function() {
        this.counter++;
        item = new Item({id: this.counter}); 
        item.set({
            part2: item.get('part2') + this.counter 
        });
        this.collection.add(item); 
        item.sync("create", item);
    },

    appendItem: function() {
        var itemView = new ItemView({
            model: item 
        });
        $('ul', this.el).append(itemView.render().el);
    }
});

var listView = new ListView();
})(jQuery);

syncItem.php

<?php
include("includes/openDbConn.php");
$request_method = strtolower($_SERVER['REQUEST_METHOD']);
switch($request_method) {
    case 'post': {
        $data = json_decode(file_get_contents('php://input'));
        if($stmt = $mysqli->prepare("INSERT INTO backbonetest (modelId, part1, part2) VALUES (?, ?, ?)"))
        {
            $stmt->bind_param("iss", $data->{'id'}, $data->{'part1'}, $data->{'part2'});
            $stmt->execute();
        }
        break;  
    }
    case 'get': {
        //NOT FINISHED
        break;  
    }
    case 'put': {
        $data = json_decode(file_get_contents('php://input')); 
        if($stmt = $mysqli->prepare("UPDATE backbonetest SET part1 = ?, part2 = ? WHERE modelId = ?"))
        {
            $stmt->bind_param("ssi", $data->{'part1'}, $data->{'part2'}, $data->{'id'});
            $stmt->execute();
        }
        break;
    }
    case 'delete': {
        $data = json_decode(file_get_contents('php://input')); //gets data from the json that was sent with the request
        if($stmt = $mysqli->prepare("DELETE FROM backbonetest WHERE modelId = ?"))
        {
            $stmt->bind_param("i", $data->{'id'});
            $stmt->execute();
        } 
        break;  
    }
}
?>

エラーの場所を 2 つの場所に絞り込みました。呼び出す場所とthis.model.sync("delete", this.model);削除$data = json_decode(file_get_contents('php://input'));の場合です。それで、削除要求メソッドを処理するときにデータにアクセスする特別な方法があるのか​​ 、それともバックボーンで削除機能を間違って呼び出しているだけなのか疑問に思っていましたか?

4

2 に答える 2

1

期待が満たされないという問題があります:)DELETEバックボーンのリクエストはデフォルトで属性を送信しませPOSTんPUT.1をPATCH行います：このフィドルhttp://jsfiddle.net/fz68a/model.saveで送信されたリクエストと送信されたリクエストを比較しますmodel.destroy

オーバーライドItem.syncして、期待する動作を与えることができます。

var Item = Backbone.Model.extend({
    defaults: {
        part1: 'hello',
        part2: 'world'
    },

    sync: function (method, model, options) {
        if (method === 'delete') {
            options = options || {};
            options.contentType = 'application/json';
            options.data = JSON.stringify(this.toJSON());
        }

        return Backbone.sync.call(this, method, model, options);
    }
});

そしてデモhttp://jsfiddle.net/fz68a/1/

1バックボーンのソース コードを参照してくださいhttp://documentcloud.github.io/backbone/docs/backbone.html#section-139

于 2013-09-14T08:35:26.337 に答える
0

あなたのphpコードで見たものから。すでにこれを行う必要が$_SERVER['REQUEST_METHOD'] あります。すでに使用しているものは、すでに質問に答えています。ダンプ $_SERVERを実行して、yuo バックボーン アプリが実際にリクエストを行ったかどうかを確認することもできます。

別のメモで...

...   
 remove: function() {
        this.model.sync("delete", this.model);  //deletes Item from server DB
        this.model.destroy(); //deletes Item from collection
    }
...

model.syncdestroy を呼び出すと、すでに暗黙的にこれが行われているため、 を呼び出す 必要はありません。http://backbonejs.org/#Model-destroy

...
 addItem : function() {
        this.counter++;
        item = new Item({id: this.counter}); 
        item.set({
            part2: item.get('part2') + this.counter 
        });
        this.collection.add(item); 
        item.sync("create", item);
    },
...

また、を行う代わりにcollection.add。http://backbonejs.org/#Collection-createを呼び出すことができますcollection.create

于 2013-09-14T07:41:38.510 に答える