Question

我是Backbone的新手，刚刚完成了一个简单的get请求。
试图实现一个简单的POST请求。
使用案例：当用户单击Transfer按钮时，输入字段值将作为JSON对象发送到REST API。

<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>

问题1
第一个问题是进入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();

当我点击按钮时没有任何反应。这是什么问题？

第2期 Backbone Model看起来像这样。

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尚未到达模型，但我不确定如何从fromAddress, toAddress and amount获取req值？
如何将JSON格式的请求参数传递给REST服务？

注意：此处无法使用form。它更像是一个ajax请求。

Answer 1

您认为的问题是：

您错过了template
$("#toAddress").val(), $("#dollars").val());

由于视图没有模板，因此不会显示任何内容，因此没有“#button”来附加事件。另外，不要忘记您通常需要向视图提供Money模型实例，以便您可以在其上设置属性。

要从表单传递值，只需使用val()方法。

要将数据发送到API，您只需要save：Backbone完成其余工作。

基本上，你可能想要的东西就像是

var TransferView = Backbone.View.extend({

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

并实现观点：

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

阅读一些Backbone教程可能是您花费大量时间的投入，例如http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tutorial-part-1-getting-started/

要将保存委派给模型方法，请执行以下操作：

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(),
        });
    }
});

Backbone JS：与click事件和POST请求相关的问题

1 个答案: