Question

相对较新的javascript和骨干。当我从集合中填充模型时，它工作正常。但是当我尝试获取单个模型元素时，我得到的格式与我的模型不匹配。我该如何纠正？

在url / task执行GET操作时，我得到以下JSON，并且我能够填充该集合：

{
  "tasks": [
    {
      "id": 8361261004,
      "task": "test 1"
    },
    {
      "id": 3916252773,
      "task": "jhgjhg"
    },
    {
      "id": 1390322898,
      "task": "erterte"
    }
  ]
}

当我对单个模型元素执行提取时，我得到以下格式并且它不适合该模型：

{
  "task": {
    "id": 8361261004,
    "task": "test 1"
  }
}

所以我尝试使用以下方法解析模型：

'parse': function( apiResponse ){
    return apiResponse.task;
}

但是当我这样做的时候，那个系列再也不匹配......

出了什么问题？

以下是代码：

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        var ref = this.name;
        if(o[ref] !==undefined) {
            if(!o[ref].push) {
                o[ref] = [o[this.name]];
            }
            o[ref].push(this.value || '');
        }
        else {
            o[ref] = this.value || '';
        }
    });
    return o;
};

var Task = Backbone.Model.extend({
    'urlRoot': 'http://localhost:5000/tasks',

    'defaults': {
        id: null,
        task: 'default'
    }
});

var Tasks = Backbone.Collection.extend({
    'url': 'http://localhost:5000/tasks',
    'model': Task,

    'initialize': function(){
        //alert("Welcome to this world");
    },

    'parse': function( apiResponse ){
        return apiResponse.tasks;
    }
});

var TaskListView = Backbone.View.extend({
    'el': '.page',
    'template': _.template($('#task-list-template').html()),

    'render': function() {
        var that = this;
        var tasks = new Tasks();

        tasks.fetch( {
            success: function() {
                that.$el.html( that.template( { 'tasks': tasks } ) );
            }
        })
    }
});

var TaskEditView = Backbone.View.extend({
    'el': '.page',
    'template': _.template($('#task-edit-template').html()),

    'render': function(options) {
        if(options.id) {
            var that = this;
            var existingTask = new Task({id: options.id});
            console.log("existingTask");
            console.log(existingTask);
            existingTask.fetch({
                success: function(gotObject) {
                    console.log(existingTask.toJSON());
                    console.log("existing task id = " + existingTask.task.id);
                    console.log("existing task task = " + existingTask.task.task);
                    that.$el.html( that.template( { task: existingTask.task } ) );
                }
            });
        }
        else {
            var task = new Task();
            this.$el.html( this.template( { task: null } ) );
        }
    },

    'events': {
        'submit .edit-task-form': 'saveTask'
    },

    saveTask: function(ev) {

        var taskDetails = $(ev.currentTarget).serializeObject();
        var task = new Task;
        console.log(taskDetails);
        task.save(taskDetails, {
            success: function(task) {
                router.navigate('', {trigger: true});
            },
            error: function(model, response) {
                var responseObj = $.parseJSON(response.responseText);
                console.log('Type: ' + responseObj.error + ' Message: ' + responseObj.message);
            }
        });
        return false;
    }
});

var Router = Backbone.Router.extend({
    routes: {
        '' : 'home', // intentionally blank for the home page
        'new' : 'editTask',
        'edit/:id' : 'editTask'
    }
});

// Display logic
var taskListView = new TaskListView({ });
var taskEditView = new TaskEditView({ });
var router = new Router();

router.on('route:home', function() {
    taskListView.render();
});

router.on('route:editTask', function(id) {
    taskEditView.render({id: id});
});

Backbone.history.start();

非常感谢你的帮助！

大卫

Answer 1

可能会修改你的解析：

'parse': function( apiResponse ){
    if( _.isArray(apiResponse) ) return apiResponse;
       return apiResponse.task;
}

Javascript骨干;型号与收藏品不同？

1 个答案: