1

我是第二次问这个问题，第一次把文字弄糊涂了，很抱歉。这是相同的问题得到改进和最好的解释。

我有一个PageableCollection，数据加载没有问题！表格的线条（我使用的是 backgrid，骨干网的扩展）是可编辑的！但是在编辑并按下回车键后什么也没有发生！服务器没有被调用，我等待一些调用 ajax 的服务器，但它没有发生。

我找到了覆盖同步的方法，但我真的不知道我想在编辑后拨打电话并说“好的”或“错误更新”。

代码如下：

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


}
4

1 回答 1

3

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

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 中实现

于 2014-07-19T20:37:33.537 回答