CODEWITHSUNDEEP
javascriptjquerybackbone.js
Run
Run

Reputation: 57286

Backbone collection.create: after waiting, how to receive the server response and add items?

I think I am asking a similar question to this, but there is no solution there it seems!

I have asked a question about validation, but that solution is on the client side, but I want to do the validation on the server side.

Am I doing it wrong?

This is my model,

var Status = Backbone.Model.extend({
    sync: function (method, model, options) {
        return $.ajax({
            type: "POST",
            dataType: 'json',
            url: 'server.php', 
            data: {
                text: this.get("text")
            },
            success: function (data) {
                // what can I do with this returned data? Should I send it to collection? if so, how??
            }
        });
    }
});

and the view, 

var NewStatusView = Backbone.View.extend({

    events: {
        "submit form": "addStatus"
    },

    initialize: function(options) {

         _.bindAll(this, 'addStatus', 'clearInput');
        this.listenTo(this.collection, 'add', this.clearInput) ;
    },

    addStatus: function(e) {
        e.preventDefault();
        this.collection.create({ text: this.$('textarea').val() },{
                wait: true, 
                success: function(model, resp, options) {
                    // nothing happens at all even though the validation has passed!
                    // what can I do here??
                }
            }
        );

    },

    clearInput: function() {
        this.$('textarea').val('');
    }
});

I thought wait: true is to wait for the server response before adding the item into the collection. So it waited (it seems), and I have some response from the server - but, the item is not added. So, what can the server response do for collection.create? how can backbone receive the response and act on it? and how to send the response to backbone's collection.create?

My server response is simple as this for testing,

<?php 
// server.php
if(empty($_POST["text"])) echo '{"error":"please enter some text"}';
else echo '{"message":"status added"}';
?>

I am on Backbone.js 1.1.0.

edit

works,

sync: function (method, model, options) {
        console.log(arguments);
        options.success("something");
    }

does not work,

sync: function (method, model, options) {
        $.ajax({
            type: "POST",
            dataType: 'json',
            url: 'server.php', 
            data: {
                text: this.get("text")
            },
            success: function (data) {
                options.success(data);
            }
        });


    }

final:

model,

sync: function (method, model, options) {

        $.ajax({
            type: "POST",
            dataType: 'text',
            url: 'server.php',
            data: {
                text: this.get("text")
            },
            success: function (data) {
                // what can I do with this returned data?
                //console.log(data);
                if(data !== 'status added') {
                    options.error(data);
                } else {
                    options.success(data);
                }
            }
        });


    }

view,

this.collection.create({ text: this.$('textarea').val() },{
                wait: true, 
                success: function(model, resp, options) {
                    // what can I do here??
                    //console.log(options);
                    console.log("success");
                    console.log(resp);
                },
                error: function(model, resp, options) {
                    // what can I do here??
                    console.log(options);
                    console.log("error");
                    console.log(resp);
                }
            }
        );

Upvotes: 1

Views: 1980

Answers (1)

backdesk
backdesk

Reputation: 1781

Try something like this:

var MyModel = Backbone.Model.extend({
    sync : function (method, model, options) {        
        var req = $.ajax({
            // ... do your ajax stuff.
        });

        req.then(options.success);
    }
});

var MyCollection = Backbone.Collection.extend({
    model : MyModel
});

var MyView = Backbone.View.extend({
    initialize : function () {
        var myCollection = new MyCollection();   

        myCollection.create({}, { 
            wait : true, 
            success : function () {
                console.log(arguments);
            }
        });
    }
});

new MyView();

You need to call on options.success. If I am correct options.success is the success handler you passed in from .create. So you're problem is that you're not calling it - hence nothing happens. I think in practice as well it's always good to return the appropriate HTTP status code (with your response), in this case 200 for success.

Upvotes: 2

Related Questions