2

我是这个网站的新手，如果我弄错了，请原谅我，但我在下面找到了问题/答案，并尝试将其合并到我自己的代码中，但我在渲染模板时遇到问题。

如何为 backgrid 实现每行删除

与上面非常相似，我试图在 Backgrid 列中显示 Bootstrap Glyph 图标以允许用户删除一行，这就是我所拥有的：

    //My custom DeleteCell
    var DeleteCell = Backgrid.Cell.extend({
        template: _.template('<span class=\"glyphicon glyphicon-home\"></span>'),
        events: {
          click: "deleteRow"
        },
        deleteRow: function (e) {
          e.preventDefault();
          this.model.collection.remove(this.model);
        },
        render: function () {
          this.el.html = this.template();
          this.delegateEvents();
          return this;
        }
    });

然后当我初始化网格时，我有以下内容：

       function createBackgrid(collection){
        var columns = [
        {
            name: "id", // The key of the model attribute
            label: "Delete", // The name to display in the header
            editable: false, 
            cell: DeleteCell
        }, ...

网格显示每列中的数据都很好，但是应该显示我的删除图标的第一列是空白的。如果我单击单元格，则该行将从模型中正确删除。

与上一个问题一样，我也尝试过_.template('<button>Delete</button>')，但得到了相同的结果。

尽管我已经编码多年，但基于 Web 的开发对我来说还是个新手，我正在学习 Bootstrap、Angular、Backbone 和 Backgrid 的速成课程。我将不胜感激这里的任何支持或建议。

谢谢李

4

1 回答 1

2

好的，所以我想通了——需要更多的毅力！

通过将 render() 函数更改为

render: function () {
          this.el.innerHTML = this.template();
          this.delegateEvents();
          return this;
        }

我能够正确显示图标。显然 ASP 1.0 的日子已经一去不复返了，那是我最后一次进行真正的 Web 开发！:-)

也许这会帮助处于类似位置的其他人？！

干杯，李

于 2014-11-13T17:20:46.333 回答