0

CodeSchoolのAnatomyofBackbone.jsコースで作業してきましたが、モデルの変更をサーバーに保存しようとすると混乱します。おそらくあなたは助けることができます。

これは私が起こる必要があることを理解していることです：

  1. fetch（）;を使用してJSONデータソースからコレクションにデータを入力します。
  2. コレクションをDOMに追加します
  3. モデルを編集します（「お気に入り」をfalseに設定するチェックボックスをオフにします）
  4. モデルを保存します。

私の仮定では、レコードを「お気に入り」として選択解除してから更新を押すと、変更は永続的であり、JSONファイルでも明らかです。ただし、これは当てはまらず、元のコレクションが読み込まれ、JSONは変更されません。

私の混乱は、fetchメソッドを使用し、モデルとコレクション内でURLを宣言することにあると思います。

このモデルの変更を永続化するにはどうすればよいですか？

モデル：

var Contact = Backbone.Model.extend({
    url: '/contacts',
    defaults:{
        favourite: false
    },
    toggleFavourite: function(){
        if(this.get('favourite') === false) 
        {
            this.set({ 'favourite': true });
        } else {
            this.set({ 'favourite': false })
        }
        this.save();
    }
});

コレクション

var Contacts = Backbone.Collection.extend({ 
    model: Contact,
    url: '/contacts'
});

ビュー

var ContactView = Backbone.View.extend({
    className: 'record',
    template: _.template('<span><%= name %></span>' + 
                         '<span class="phone-number"><%= phone %></span>' +
                         '<input type="checkbox" <% if(favourite === true) print("checked") %>/>'),

    events: {
        'change input': 'toggleFavourite',
        'click .phone-number': 'dial'
    },

    initialize: function(){
        this.model.on('change', this.render, this);
    },

    toggleFavourite: function(e){
        this.model.toggleFavourite();
    },

    dial: function(e){
        alert('Dialing now...');
    },

    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

var ContactsView = Backbone.View.extend({

    initialize: function(){
        this.collection.on('add', this.addOne, this);
        this.collection.on('reset', this.addAll, this);
    },

    addOne: function(contact){
        var contactView = new ContactView({ model: contact });
        this.$el.append(contactView.render().el);
    },

    addAll: function(){
        this.collection.forEach(this.addOne, this);
    },

    render: function(){
        this.addAll();
    }

});

App.js

var contacts = new Contacts(); //creates list
contactsView = new ContactsView({ collection: contacts}); //creates list view
contacts.fetch({url: 'contacts/data.json'}); //populates list
$('#mainPanel').append(contactsView.el); //appends list to DOM
4

1 に答える 1

1

バックボーンはクライアントで動作し、サーバー自体のファイルを変更することはできません。

サーバーのどこかに動的データを保存する必要があります（jsonを使用する場合はmongodbの方が簡単かもしれません）。

静的ファイルという名前のcontacts/data.json 。サーバー上で書き込みを行わなかった間は変更されないためです。

于 2013-03-04T01:48:22.080 に答える