JSON的主干FETCH，编辑模型数据，然后保存回JSON

Question

I've been working through Code School's Anatomy of Backbone.js course, but am confused when trying to save model changes back to the server. Perhaps you can help.

This is what I understand needs to happen:

1. Populate collection from a JSON data source using fetch();
2. Append the collection to the DOM
3. Edit a model (uncheck checkbox, which sets 'favourite' to false)
4. Save the model.

My assumption is that if I were to unselect a record as a 'favourite' then hit refresh, the change would be persistant and also evident in the JSON file. However, this isn't the case and the original collection is loaded and JSON is unchanged.

I think my confusion is in using the fetch method and declaring the URL within the model and collection.

How can I get this model change to be persistant?

Model:

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

Collection

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

Views

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

Answer 1

Backbone works on client, and can't change file on server itself.

You need to store dynamic data somewhere on server (maybe mongodb if you use json it will be easier).

contacts/data.json named static file. because it is not changing while you did't owerwrite it on the server.