使用本地数据测试 BackboneJS REST API

Question

我有一个 BackboneJS 模型/集合，如下所示；

var PersonInfo = BaseModel.extend({
    idAttribute: "PersonInfoId",
    urlRoot: "api/outline/",
    defaults: {
        "name": null,
        "class": null
    }
});


var PersonInfoCollection = BaseCollection.extend({
    url: "api/outline/",
    model: PersonInfo
});

现在我有一个网格，其中填充了来自后端的响应/数据（REST 调用） 所以我说;

var personInfoCollection = new PersonInfoCollection();
myGrid.backboneRegColl(personInfoCollection);

我的方法也定义为；

Grid.prototype.backboneRegColl = function(collection, parameters) {
            var self = this;
             collection.setServerParameters(pars);

                collection.bind("dataReady", function(data) {
                    //Clear the grid data
                    self.clear();
                    //Get data from collection
                    var data = collection.toJSON();
                    //Render data from collection
                    self.renderData(data);
                });
} 

renderData 也定义如下；

Grid.prototype.renderData = function(data) {

            var self = this;

            //Empty data rows
            this.el.find("tbody").empty();
            //get data from grid storage
            var dataToRender = this.data;

            //Override data to render from arguments
            if(data != undefined) {
                dataToRender = data;
            }
            if(dataToRender.length && ! $.isArray(dataToRender)) {
                dataToRender = dataToRender.toArray();
            }
            //If the dataToRender is an array
            if($.isArray(dataToRender)) {
                //If its an empty array
                //XXX
                if(dataToRender.length === 0) {
                    //Show no records message
                    _createEmptyRecordsMessage.call(this);
                }
                else {
                    //Render each row
                    $.each(dataToRender, function(index, dataRow) {
                        $frag.append(_createDataRow.call(self, dataRow));
                    });
                    $("tbody", this.el).append($frag);
                }
            }
            //If the dataToRender is null, undefined or not an array
            else {
                //Show no records message
                _createEmptyRecordsMessage.call(this);
            }

            //Resize is called to make sure header and data table widths are aligned
            this._resize();

            function _createDataRow(data) {
                var tr = $("<tr>").attr("tabIndex","-1"),
                self = this;

                //For each column in column definitions
                $(this.cols).each(function(index, column){
                    //Create a cell
                    var cell = $("<td>");
                    var dataValue = $("<div>").html("-");
                    if($.isFunction(column.renderer)) {
                        //Call the renderer and place the returned html|string into the data container 
                        dataValue.html(column.renderer.call(data, $.extend(true, {}, column)));
                    }
                    else if(data[column.id] !== undefined && data[column.id] !== null) {
                        //Set the text of the data container to the data
                        dataValue.html(data[column.id]).attr('title', data[column.id]);
                    }

                    cell.append(dataValue);

                    tr.append(cell);
                });

                //store the data for the row in the html row
                tr.data(data);

                return tr;
            }
        }

现在我的问题是我没有准备好 REST API...那么如何使用本地 JSON 数据测试网格是否正确填充？

Answer 1

我建议您可以尝试使用reset 进行虚拟数据测试。

重置功能可以帮助您将收藏替换为新收藏并触发“重置”事件。我们可以使用它来分配一个虚拟数据进行测试。

尝试在集合 obj 上注册一个“重置”事件监听器：

Grid.prototype.backboneRegColl = function(collection, parameters) {
    var self = this;
    collection.setServerParameters(pars);

    collection.bind("reset dataReady", function(data) {
      //Clear the grid data
      self.clear();
      //Get data from collection
      var data = collection.toJSON();
      //Render data from collection
      self.renderData(data);
    });
}

然后通过调用重置函数为集合分配一个虚拟数据。 （请确保数据结构正确）

personalInfoCollection.reset([{id:1,name:"Jimmy",tel:"123456"},{id:2,name:"Deemon",tel:"222222"}]);

触发'reset'事件后，视图将正确呈现。