0

Backbone を使い始めたばかりです。以下のコードに基づいて、2 つの質問があります。

最初の問題は、フォームに入力してボタンをクリックした後、いくつかのデフォルト属性を使用してモデル オブジェクトを作成する必要があることです。ただし、console.log には、モデルを新しいビュー オブジェクトに渡す前に、記入したフォームからの最新の属性を持つモデルが出力されます。

2 番目の問題は、データを 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();
});
4

2 に答える 2

1

私はあなたのエラーを見ようとしましたが、あなたがこれらのことを見逃していることに気付き
ました:

$(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>
于 2013-04-27T21:51:24.387 に答える