HTML5 Data Bindings Support Product Page


Combine data-binding-show and data-binding-hide?

Asked 25 Aug 2016 13:58:17
has this question
25 Aug 2016 13:58:17 Hans Haverlach posted:
In a page I want to show a div only when two conditions are met.
So I used a data-binding-show if one condition is true
and data-binding-hide if the OTHER condition is false.

If only one of the conditions is met, then also hide the div.
But I can't get it working. It will always show the div.

The code:

<div  data-binding-hide="{{fp_image}}" data-binding-show="{{c_blogimage}}"  class="columns"  ><div class=" actueel_img_container" style="background-image:url({{c_blogimage}})" >blogimage</div></div>

Is it impossible? If so, then I wil have to go back to use my php code again


Replied 25 Aug 2016 14:55:00
25 Aug 2016 14:55:00 Teodor Kuduschiev replied:
Can you please explain the exact conditions when the div must be displayed?
Replied 25 Aug 2016 15:29:24
25 Aug 2016 15:29:24 Hans Haverlach replied:
There is a blog article.
It can have a blog image attached. (c_blogimage)
It can have a article image attached (fp_image)
It can have no image attached.

There a two columns. Left for image and right for text.
In the left column there are TWO divs. One div to show fp_image.The other one for the blogimage.
If fp_image is attached then only show the fp_image div. (even when there is a blog_image also attached).
This works great with: data_binding-show="{{fp_image}}"

If no fp_image is attached, but blog_image is attached, then show the blog_image div.
This works with: data-binding-show="{{c_blogimage}}"

But the problem is when the fp_image and blog_image are both attached. In that case the div for the blog_image must hide, even though the blog_image is present.

And if no fp_image and blog_image are attached, then don't show either divs, the column will not expand and the text will use the full width.

Hope you understand the situation!
Replied 26 Aug 2016 07:23:31
26 Aug 2016 07:23:31 Teodor Kuduschiev replied:
You can try using this condition for the blog_image div:

data-binding-show="{{c_blogimage && fp_image == ''}}"

This will show the blog_image only when there is a record for {{c_blogimage}} and only when {{fp_image}} is empty.
Replied 26 Aug 2016 09:24:28
26 Aug 2016 09:24:28 Hans Haverlach replied:
Great! That worked!
Thank you.

Reply to this topic