骨干(同步)更新事件

时间:2014-07-17 19:02:26

标签: javascript backbone.js sync backgrid

这是我第二次提出这个问题,第一次将文字弄糊涂了解,对不起。以下是改进和最佳解释的相同问题。

我有一个PageableCollection,数据加载没有问题!表格的线条(我使用backgrid,骨干的扩展名)是可编辑的!但编辑完成后按回车按钮没有任何反应!服务器没有被调用,我等待服务器调用ajax,但它不会发生。

我找到了覆盖同步的方法,但我真的不知道在编辑后打电话要做什么,然后说'#34;好的"或"错误更新"。

代码如下:

var Territory = Backbone.Model.extend({});

var PageableTerritories = Backbone.PageableCollection.extend({
    model: Territory,
    url: "linhas/results",
    state: {
        pageSize: 9
    },
    mode: "client",
    sync: function (method, model, options){
        return Backbone.sync(method, model, options);
    }
});


var pageableTerritories = new PageableTerritories(),
    initialTerritories = pageableTerritories;

function createBackgrid(collection){
    var columns = [{
        name: "id", // The key of the model attribute
        label: "ID", // The name to display in the header
        editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
        // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
        cell: Backgrid.IntegerCell.extend({
            orderSeparator: ''
        })
    }, {
        name: "name",
        label: "Name",
        // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
        cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
    }, {
        name: "pop",
        label: "Population",
        cell: "integer" // An integer cell is a number cell that displays humanized integers
    }, {
        name: "url",
        label: "URL",
        cell: "uri" // Renders the value in an HTML <a> element
    }];
    if ($(window).width() < 768){
        //okendoken. removing URL-column for screens smaller than 768px
        columns.splice(3,1)
    }
    var pageableGrid = new Backgrid.Grid({
        columns: columns,
        collection: collection,
        footer: Backgrid.Extension.Paginator.extend({
            //okendoken. rewrite template to add pagination class to container
            template: _.template('<tr><td colspan="<%= colspan %>"><ul class="pagination"><% _.each(handles, function (handle) { %><li <% if (handle.className) { %>class="<%= handle.className %>"<% } %>><a href="#" <% if (handle.title) {%> title="<%= handle.title %>"<% } %>><%= handle.label %></a></li><% }); %></ul></td></tr>')
        }),
        className: 'table table-striped table-editable no-margin'
    });
    $("#table-dynamic").html(pageableGrid.render().$el);


}

1 个答案:

答案 0 :(得分:3)

您需要在编辑单元格后触发保存。 这可以通过监听Territory模型的change事件来完成。我一直在使用以下内容:

var MyModel = Backbone.Model.extend({
    initialize : function() {
        this.on('change', function(model, options) {
            // Prevent save on update
            if (options.save === false)
                return;

            model.save(_.clone(model.attributes), {});
        });
    },
    // Process and remove model unrelated stuff from server response
    parse : function(resp, options) {
        // pure model fetch
        if (!resp.data && !resp.notifications)
            return resp;

        // process notifications
        if (resp.notifications && resp.notifications.length)
            processNotifications(resp.notifications);

        return resp.data || {};
    },
    rollBack : function() {
        // Rollback to old data
        this.set(this.previousAttributes(), {save: false});
        // Trigger cell rendering
    },
    save : function(attrs, options) {
        options || (options = {});

        options.success = function(model, resp, options) {
            // Show optional success messages here if needed and
            // not in response from server
        };

        options.error = function(model, xhr, options) {
            var resp = JSON.parse(xhr.responseText);
            model.parse(resp, options);
            // Rollback to old data
            model.rollBack();
            model.trigger('backgrid:error');
        };

        // We get the correct data back from the server - prevent multiple saves
        options.save = false;
        options.data = JSON.stringify(attrs);

        Backbone.Model.prototype.save.call(this, attrs, options);
    }
});

此实现从服务器获取所有通知(成功时没有反馈)。因此,通知在model.parse方法中过滤。如果有通知,则数据位于响应的属性数据中。但是,如果您显示来自js的反馈,请在options.success和options.error

中实现它