使用Knockout JS绑定click事件实现点击color-data div动态更新图片

问题原因及解决方案 #

你遇到的是KnockoutJS数据绑定未生效的问题，核心问题和对应修复方式如下：

1. 首先确认mappingImage是可观察对象 #

这是最高发的问题：只有Knockout的可观察对象更新时，才会主动触发UI同步刷新。
你需要在视图模型初始化时，将mappingImage声明为可观察对象：

// 视图模型初始化部分
function YourViewModel() {
  const self = this;
  // 错误写法（普通变量更新不会通知UI）
  // self.mappingImage = ''
  // 正确写法
  self.mappingImage = ko.observable('');
  
  // 其余代码保留
  self.doorColorList = // 你的原有数据
  self.selectColor = function (styleColor) {
    alert('kkkk'+styleColor.mapping_image);
    self.mappingImage(styleColor.mapping_image);
  }
}
ko.applyBindings(new YourViewModel());

2. 修正img标签的绑定逻辑错误 #

你当前把img放在doorColorList的foreach循环内部，会导致每一条doorStyleType数据都渲染一个相同的img标签，所有标签都会同步绑定全局的mappingImage，不符合常规的预览需求。
如果是做全局的颜色预览图，把img标签移到foreach循环外部即可：

<!-- 全局预览图移到循环外 -->
<img class="mappimg" width="45" height="45" alt="" data-bind="attr: {src: mappingImage}, visible: mappingImage">

<div data-bind="foreach: { data: doorColorList, as: 'doorStyleType' }">
   <div data-bind="foreach: { data: Object.values(doorStyleType.colors.standard) , as: 'allDoorColorStandard' }">  
        <div class="color-data" data-bind="click: $parents[1].selectColor">      
            <span class="style-name" data-bind="text: allDoorColorStandard.color_name"></span>
        </div>      
    </div>
</div>

3. 可选：如果要每个doorStyleType下单独挂预览图 #

如果业务要求每个款式下显示自己的选中颜色预览，就不要用全局的mappingImage，给每个doorStyleType加自己的可观察属性：

// 初始化doorColorList时给每个项加可观察的mappingImage
self.doorColorList = rawDoorColorList.map(item => {
  item.mappingImage = ko.observable('');
  return item;
})

// selectColor改成接收当前的父级doorStyleType
self.selectColor = function (styleColor, event) {
  // 拿到当前点击项所属的doorStyleType，更新它自己的预览图
  const context = ko.contextFor(event.target);
  context.$parent.mappingImage(styleColor.mapping_image);
}

同时把img绑定改成当前循环项的mappingImage：

<div data-bind="foreach: { data: doorColorList, as: 'doorStyleType' }">
    <!-- 绑定当前doorStyleType自己的mappingImage -->
    <img class="mappimg" width="45" height="45" alt="" data-bind="attr: {src: mappingImage}, visible: mappingImage">
   <div data-bind="foreach: { data: Object.values(doorStyleType.colors.standard) , as: 'allDoorColorStandard' }">  
        <div class="color-data" data-bind="click: $parents[1].selectColor">      
            <span class="style-name" data-bind="text: allDoorColorStandard.color_name"></span>
        </div>      
    </div>
</div>

附加优化建议 #

把原来的if绑定换成visible绑定，if绑定会在条件不成立时直接移除DOM元素，visible仅控制显隐，不会丢失绑定关系，适合这种频繁切换显隐的预览场景。

内容的提问来源于stack exchange，提问作者Jimit Bhavsar