Knockout.js 在剔除simplegrid中动态对齐文本中心

我正在使用knockout simplegrid，希望在中间显示一个列

我尝试添加以下带有文本align:center的代码，以在视图模型中启动简单网格

this.gridViewModel = new ko.simpleGrid.viewModel({
    data: this.items,
    columns: [
        { headerText: "Item Name", rowText: "name" },
        { headerText: "Sales Count", rowText: "sales",text-align: "center" },
        { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
    ],
    pageSize: 4
});

但它给我带来了错误意外标记-

我还添加了一个可观察的simplegrids视图模型，它是

this.textAlign=ko.observable（“左”）

我添加了值“left”，因为这将是默认值。但是我不知道如何在simplegrid viewmodel中使用这个可观察的

这是你的电话号码

急切地等待你们这些聪明人的反馈

更新1

我知道我明白为什么会出现“意外标记-”错误。这是因为它需要文本对齐的javascript样式名称。等价的javascript样式名称是textAlign，它没有-。我从这里得到这个信息

但是我仍然无法动态地将文本绑定到中心
淘汰simplegrid的功能非常有限，因此您需要自己添加此功能

您必须扩展
“ko_simpleGrid_grid”
模板，并在指定的
td
上添加
样式
绑定：

<tr data-bind=\"foreach: $parent.columns\">\
      <td data-bind=\"text: typeof rowText == 'function' ? \
          rowText($parent) : $parent[rowText], style: $data.cellStyle \"></td>\
</tr>\

演示

columns: [
            { headerText: "Item Name", rowText: "name" },
            { headerText: "Sales Count", rowText: "sales", 
              cellStyle: { textAlign: "center" } },
            { headerText: "Price", 
                rowText: function (item) { return "$" + item.price.toFixed(2) } }
        ],