主干模型保存和回调问题

backbone model saving and callback issues

本文关键字：回调 问题 保存 模型      更新时间：2023-09-26

我刚开始使用Backbone。基于下面的代码，我有两个问题要问。

第一个问题是在我填写表单并单击按钮之后，应该创建具有一些默认属性的模型对象。但是，在将模型传递给新的视图对象之前，console.log会打印出带有我填写的表单中最新属性的模型。

第二个问题是我可以成功地将数据保存到db，但我的成功回调函数没有被调用。有人能帮我回答这些问题吗?

var form = document.forms[0];
var RetailerModel = Backbone.Model.extend({
    urlRoot: ' retailer.php',
    defaults: {
        name: 'company-name',
        address: 'company-address',
        phone: 'company-phone',
        icon: 'http://localhost/icon.png'
    }
});
var RetailerCollection = Backbone.Collection.extend({
});
var RetailerView = Backbone.View.extend({
    className: 'retailer',
    template: _.template($('#retailer-template').html()),
    initialize: function() {
        //this.listenTo(this.model, 'change', this.render);
        var obj = {
            name: form.name.value,
            address: form.address.value,
            phone: form.phone.value
        };
        this.model.set(obj);
        //why the successful callback does not work????
        this.model.save(null, {success: function(model, response){console.log('successful');}});
    },
    render: function() {
        $('#retailer-list').append(this.$el.html(this.template(this.model.toJSON())));
        return this;
    }
});
var RetailerViews = Backbone.View.extend({
});
$('#submit').click(function(e){
    var retailer_model = new RetailerModel();
    console.log(retailer_model); // this prints out the new changed attributes instead of the default ones, why???
    var retailer_view = new RetailerView({model: retailer_model});
    form.reset();
});

1获取模型的正确状态

console.log(retailer_model)将不显示模型的属性，它将显示整个模型，但console.log(retailer_model.attributes)将显示。还要记住，console.log 并不总是在正确的上，特别是如果您在记录它之后修改对象，这可能会导致混乱!

要获得模型的实际当前状态，您应该对其进行浅拷贝或深拷贝。因此，您可以使用下划线克隆方法进行浅复制，而不是console.log(model):

console.log(_(model).clone());

2保存回调成功

为了帮助你，我们真的需要更多地了解你的情况。我要寻找的第一件事是您的服务器是否返回正确的反馈。Backbone是一个基于REST标准的系统。您确定服务器正在返回正确的响应代码吗?如果你使用chrome浏览器，打开你的开发工具，然后网络选项卡检查你得到什么响应时，张贴你的模型。为了触发成功回调，服务器应该返回200或201的状态。

另一种测试方法是查看错误回调是否正在触发:)。

我试着看你的错误，我意识到你错过了这些东西:
1。当DOM ready事件触发时，你应该做DOM相关的事情:

$(function() { 
    form = document.forms[0];
    $(form).live('submit', function(e){
        // ...
    });
});


2。您可以对表单使用submit。它还捕获enter点击表单:

$(form).live('submit',function(){
    //...
});


3。您应该在提交表单中使用return false;。它可以防止默认表单数据发送到操作url。

$(form).live('submit', function(e){
    // ...
    return false;
});

它看起来是这样的。我没有检查成功回调，但我希望它会工作。

<html>
<head>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript">
var RetailerModel = Backbone.Model.extend({
    urlRoot: ' retailer.php',
    defaults: {
        name: 'company-name',
        address: 'company-address',
        phone: 'company-phone',
        icon: 'http://localhost/icon.png'
    }
});
var RetailerCollection = Backbone.Collection.extend({});
var RetailerView = Backbone.View.extend({
    className: 'retailer',
    //template: _.template($('#retailer-template').html()),
    initialize: function() {
        //this.listenTo(this.model, 'change', this.render);
        var obj = {
            name: form.name.value,
            address: form.address.value,
            phone: form.phone.value
        };
        this.model.set(obj);
        //why the successful callback does not work????
        this.model.save(null, {
            success: function(model, response){
                console.log('successful');
            }
        });
    },
    render: function() {
        $('#retailer-list').append(this.$el.html(this.template(this.model.toJSON())));
        return this;
    }
});
var RetailerViews = Backbone.View.extend({});
$(function() { // you should do DOM related things when DOM ready event fired
    form = document.forms[0];
    $(form).live('submit', function(e){
        var retailer_model = new RetailerModel();
        console.log(retailer_model);
        var retailer_view = new RetailerView({model: retailer_model});
        form.reset();
        return false; // to prevent form data sending return false
    });
});
</script>
</head>
<body>
    <form action="#" id="#submit">
        <input type="submit" value="submit"/>
        <input type="text" name="address"/>
        <input type="text" name="name"/>
        <input type="text" name="phone"/>
    </form>
</body>
</html>
相关文章：