I want to show image from allDoorColorStandard.


Onclick "color-data" div , i want to update image. In alert i'm getting image URL, now need to bind in image tag.

<div data-bind="foreach: { data: doorColorList, as: 'doorStyleType' }">
                <img class="mappimg" width="45" height="45" alt="" data-bind="attr: {src: $parent.mappingImage}" if="$parent.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>


selectColor: function (styleColor,color) {

Any help will be appreciated.

1 Answer 1


In your JS you need to update the observable value:


  • Uncaught ReferenceError: image is not defined Oct 14, 2021 at 10:44
  • Ah you have updated your code. Try $parent.mappingImage(styleColor.mapping_image). You seem to be doing this in a very convoluted way with all the additional loops which is making this more complicated than it needs to be
    – Ben Crook
    Oct 15, 2021 at 14:10
  • It's updating all parent images instead of it's parent image. Oct 20, 2021 at 13:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.