KoGrid пользовательские сотовый шаблон

Question

мне нужно пользовательские 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}]}}]; 

Как я могу использовать поля цвета и 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/

Answer 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