如何将 dataview itemTpl 绑定到 viewModel？答案

【问题标题】：How to bind dataview itemTpl to viewModel?如何将 dataview itemTpl 绑定到 viewModel？
【发布时间】：2021-02-23 15:08:05
【问题描述】：

我想将 dataview 项目标记为收藏。如何按照逻辑将 dataview itemTpl 类绑定到 viewModel：

<i class="   '{isFavorite?"class1":"class2"}'    "></i>

其中isFavorite 是模型字段类型布尔值。

itemTpl 类似于

itemTpl: new Ext.XTemplate(
  '<div class="card" style="padding-left: 32px;">',
  '<div class="img"><img src="{src}" class="imgClass"></div>',
  '<div><img class="favorite-yes"></div>',               
  '</div>',
)

css

.favorite-yes {
    width: 24px;
    height: 24px;
    background: url(http://pngimg.com/uploads/heart/heart_PNG51337.png) no-repeat;
}

.favorite-no {
    width: 24px;
    height: 24px;
    background: url(http://www.pngall.com/wp-content/uploads/3/Heart-Background-PNG-Image.png) no-repeat;
}

【问题讨论】：

标签： css extjs dataview

【解决方案1】：

试试

itemTpl: new Ext.XTemplate(
  '<div class="card" style="padding-left: 32px;">',
  '<div class="img"><img src="{src}" class="imgClass"></div>',
  '<div>',
  '<tpl if="isFavorite">',
  '   <img class="favorite-yes">',
  '<tpl else>',
  '   <img class="favorite-no">',
  '</tpl>',
  '</div>',               
  '</div>',
)

【讨论】：