KoGrid 自定义单元格模板答案

【问题标题】：KoGrid custom Cell TemplateKoGrid 自定义单元格模板
【发布时间】：2016-03-24 06:45:12
【问题描述】：

我需要这样的自定义 KoGrid 单元格模板：

对于这个模型：

          var model = [
    { Color: { Hex: "#5EB95E", Name: "green" }, 
    AvailablePatterns: { SelectedId:"", 
       Patterns:[{Title:"test1", Id:1},{Title:"test3", Id:2}]}},
    { Color: { Hex: "#FAA732", Name:"orange" }, 
    AvailablePatterns: { SelectedId:"", 
       Patterns:[{Title:"test2", Id:3},{Title:"test4", Id:4}]}}];

如何在我的单元格中使用字段 Color 和 AvailablePatterns？我尝试使用 $parent.getProperty 方法获取此字段，但它对我不起作用

     columnDefs: [
             {
            field: 'Color', 
            displayName: 'Color', 
            cellTemplate: '<span class="status" data-bind="style: { backgroundColor : $parent.getProperty("Color.Hex") }"></span>' +
                '<span data-bind="text: $parent.getProperty("Color.Name")"></span>'
        },
          {
              field: 'AvailablePatterns', 
              displayName: 'Pattern', cellTemplate: "<select class=\"pattern\" \
                   data-bind=\" options: $parent.getProperty('AvailablePatterns.Patterns'), \
                   optionsValue: '$parent.getProperty('Id')', \
                   optionsText: '$parent.getProperty('Title')',\
                   value: '$parent.getProperty('AvailablePatterns.SelectedId')' \"> \
                     </select>"
          }
      ]

https://jsfiddle.net/akvm9qgy/

【问题讨论】：

标签： knockout.js kogrid

【解决方案1】：

您有以下错误，请随时向我寻求进一步的解释：

单元格模板必须是一个 html 元素。

cellTemplate: '<div><div class="status" data-bind="style: { backgroundColor : $parent.entity.Color.Hex }"></div><span data-bind="text: $parent.entity.Color.Name"></span></div>'

对于访问属性，我更喜欢$parent.entity 而不是$parent.getProperty（实际上我以前从未见过这种方法）
optionValue 和 optionText 必须是属性名称的纯字符串

cellTemplate: '<select class=\"pattern\" \
               data-bind=" options: $parent.entity.AvailablePatterns.Patterns, \
               optionsValue: \'Id\', \
               optionsText: \'Title\',\
               value: $parent.entity.AvailablePatterns.SelectedId"> \
                     </select>'

请查看您的fiddle updated

【讨论】：