CODEWITHSUNDEEP
javascriptbackbone.js
Himanshu Yadav
Himanshu Yadav

Reputation: 13585

Backbone JS: Issue related to click event and POST request

I am new to Backbone and just finished a simple get request.
Trying to implement a simple POST request.
Use case: When user clicks on Transfer button input field values will be sent to a REST API as a JSON object.

<div id="transfer"> <input type="text" placeholder="From Address" id="fromAddress" /> <input type="text" placeholder="To Address" id="toAddress" /> <input type="text" placeholder="Amount" id="dollars" /> <input type="button" id="button" value="Transfer"/> </div>


Issue 1
First problem is that what will go into the Backbone View.
My Backbone View:

var TransferView = Backbone.View.extend({

    events: {
        "click #button": "sendMoney"
    },
    sendMoney: function() {
        alert();
        console.log($("#fromAddress").val());
            //this.model.transferMoney($("#fromAddress").val(), 
                $("#toAddress").val(), $("#dollars").val());
    }
});

var transferView = new TransferView();
transferView.render();

When I click on button nothing happens. What is the issue here?

Issue 2 Backbone Model looks like this.

var Money = Backbone.Model.extend({
    url: 'http://localhost:3000/sendMoney',
    defaults: {
        fromAddress: "",
        toAddress: "",
        amount: ""
    },
    transferMoney: function(request, response) {
        //get field values?
        this.save();
    }
});

var transferMoney = new Money();

Flow didn't reach the model yet, but I am not sure how would I fetch fromAddress, toAddress and amount values from req?
How would I pass the request parameters in JSON format to REST service?

Note: Can not use form here. It is more like a ajax request.

Upvotes: 0

Views: 206

Answers (1)

David Sulc
David Sulc

Reputation: 25994

The issues with your view are :

  • you're missing a template
  • you have a syntax error in $("#toAddress").val(), $("#dollars").val());

Since the view doesn't have a template, nothing gets displayed and therefore there is no "#button" to attach events to. Also, don't forget you'll typicallly need to provide a Money model instance to the view, so that you can then set attributes on it.

To pass value from the form, just use the val() method.

And to send data to the API, you just need to save: Backbone does the rest.

Basically, what you probably want to have is something like

var TransferView = Backbone.View.extend({

    events: {
        "click #button": "sendMoney"
    },
    sendMoney: function() {
        this.model.save({
            fromAddress: $("#fromAddress").val(),
            toAddress: $("#toAddress").val(),
            amount: $("#dollars").val(),
        });
    }
});

And to instanciate the view:

var money = new Money();
var transferView = new TransferView({ model: money });

It would probably be a good investment of your time to read a few Backbone tutorials, such as http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tutorial-part-1-getting-started/

To delegate saving to a model method, do something like:

var Money = Backbone.Model.extend({
    url: 'http://localhost:3000/sendMoney',
    defaults: {
        fromAddress: "",
        toAddress: "",
        amount: ""
    },
    transferMoney: function(attributes) {
        this.save(attributes);
    }
});

var TransferView = Backbone.View.extend({

    events: {
        "click #button": "sendMoney"
    },
    sendMoney: function() {
        this.model.transferMoney({
            fromAddress: $("#fromAddress").val(),
            toAddress: $("#toAddress").val(),
            amount: $("#dollars").val(),
        });
    }
});

Upvotes: 1

Related Questions