Question

我一直在使用Code School的Backbone.js解剖课程，但在尝试将模型更改保存回服务器时感到很困惑。也许你可以帮忙。

这是我理解需要发生的事情：

使用fetch（）;
将集合附加到DOM
编辑模型（取消选中复选框，将'favorite'设置为false）
保存模型。

我的假设是，如果我要取消选择记录作为“收藏夹”，然后点击刷新，则更改将持久且在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

Answer 1

Backbone在客户端上运行，无法在服务器本身上更改文件。

你需要在服务器上的某个地方存储动态数据（如果使用json，可能会更容易mongodb）。

contacts / data.json命名为 static 文件。因为当你没有在服务器上写下它时它没有改变。

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

1 个答案: