動態對齊文本中心在淘汰賽simplegrid

Question

我正在使用淘汰賽Simplegrid，並希望顯示其中一列。

我嘗試下面的代碼添加文本對齊：中心啓動簡單的網格在我的視圖模型

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視圖模型中使用這個可觀察元素。

這裏是Fiddle

翹首等待您的智能你們的反饋。

UPDATE1

我知道明白我爲什麼會收到 「意外的標記 - 」 錯誤。它是因爲它期望javascript樣式名稱用於文本對齊。等效的JavaScript樣式名稱是textAlign，它不包含-。我得到這個信息從這個Page

但我仍然無法動態綁定文本居中

Answer 1

淘汰賽simplegrid的功能是非常有限的，所以你需要自己添加此功能。

您必須擴展"ko_simpleGrid_grid"模板，並添加一個style與上gnerated td結合：

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

現在你可以在任何有效style約束力的值傳遞與：

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

演示JSFiddle。