0

I got one problem like this: Backbone model .toJSON() doesn't render all attributes to JSON

but i set attribute of model by model.set({"mid": "123"}); Through the debug of chrome i print the information lists below:

console.log(model);
console.log(model.attributes);
console.log(model.toJSON());

I found the key of mid disappeared. I don't know why, who can help me?

attributes: Object
age: "123"
carrer: "123"
id: "8d7c79a0-7517-b279-646f-2838abaf4538"
mid: 6
name: "123"
sex: "0"
Object {name: "123", sex: "0", age: "123", carrer: "123", id: "8d7c79a0-7517-b279-646f-2838abaf4538"}

This is one demo: /** * Backbone Demo */ $(function(){

//Model，单个Employee模型
var Employee = Backbone.Model.extend({

    initialize: function(){
        this.on('invalid', function(model, error) {
            alert(error);
        });
    },
    defaults: {
        name: "test",
        sex: "男",
        age: 25,
        carrer: "test"
    },
    validate: function(data){
        //...
    }
});

//Collection- Employee集合
var EmployeeCollection = Backbone.Collection.extend({
    model: Employee,
    localStorage: new Store("employees")
});

var employees = new EmployeeCollection();

//View
var EmployeeView = Backbone.View.extend({
    tagName: "tr",
    template: _.template($("#item-template").html()),
    events: {
        "dblclick td": "edit",
        "blur input,select": "close",
        "click a.del": "delOne"
    },
    initialize: function() {
        this.model.on("change", this.render, this);
        this.model.on("destroy", this.remove, this);
    },
    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    },
    edit: function(e){
        var val = $(e.currentTarget).text();
        $(e.currentTarget).addClass("editing").find("input,select").val(val).focus();
    },
    close: function(e){
        var key = $(e.currentTarget).attr("name"),
            val = $(e.currentTarget).val();
        this.model.set(key, val);
        $(".editing").removeClass("editing");
    },
    remove: function(){
        $(this.el).remove();
    },
    delOne: function() {
        this.model.destroy();
    }
});

var AppView = Backbone.View.extend({
    el: $("#app"),
    events: {
        "click #add-btn": "updateModel"
    },
    initialize: function() {
        employees.on("add", this.addOne, this);
        // 调用fetch的时候触发reset
        employees.bind('reset', this.addAll, this);
        employees.fetch();
    },
    updateModel: function(e) {
        var employee = new Employee(),
            attr = {};
        $('#emp-form input,#emp-form select').each(function() {
            var input = $(this);
            attr[input.attr('name')] = input.val();
        });
        employee.on('invalid', function(model, error) {
            alert(error);
        });
        if (employee.set(attr, {validate: true})) {
            employees.create(employee, {wait: true});
        }
    },
    addOne: function(employee) {
        employee.set({
            "mid": employee.get("mid") || employees.length
        });
        var view = new EmployeeView({
            model: employee
        });
        $(".emp-table tbody").append(view.render().el);
    },
    addAll: function(){
        employees.each(this.addOne);
    }
});

var app = new AppView();

});

the below code is part of backbone-localstorage.js:

create: function(model) {
        if (!model.id) {
            model.id = guid();
            model.set(model.idAttribute, model.id);
        }
        console.log(model);
        console.log(model.attributes);
        console.log(model.toJSON());
        console.log(JSON.stringify(model));
        this.localStorage().setItem(this.name + "-" + model.id, JSON.stringify(model));
        this.records.push(model.id.toString());
        this.save();
        return this.find(model);
    }
4

0 回答 0