HTML5 Data Bindings Support Product Page

Solved

data-binding-show causes this.nodeValue Is Undefined ERROR

Reported 26 Sep 2013 17:16:17
1
has this problem
26 Sep 2013 17:16:17 Jonathan Heintzeman posted:
if(e=this.nodeValue.match(/\{\{.+?\}\}/g)){

Error is on line 30 of dmxDataBindings.js

Error is thrown in Firefox and Chrome, I do not see it in IE (surprised).

Example page: www.ask4darla.com/DATA8.cfm
<div id="ID001"
data-binding-repeat-children="{{CLAREN_GetListings.claren.data.listings.listing}}">
  <div class="CLAREN_GetListings_Child Row_{{$number}} Is_Even_{{$oddeven}} Type_{{class}}">
    <img src="http://clarenproject.com/rmlsimages/200/{{imagename}}" width="200" />
    <div class="price">Price:{{price}}</div>
    <div class="beds" data-binding-show="{{beds}}">esists</div>
    <div class="doesnotexist" data-binding-show="{{doesnotexist}}">doesnotexist</div>
    <div data-binding-show="{{baths}}" id="BathsTop" class="baths">Baths:{{baths}}</div>
  </div>
</div>

Replies

Replied 30 Sep 2013 08:04:38
30 Sep 2013 08:04:38 Teodor Kuduschiev replied:
Hello,
Actually i do not see any errors on your page.
Replied 30 Sep 2013 16:40:17
30 Sep 2013 16:40:17 Jonathan Heintzeman replied:
When working correctly it shows 6 records, each having a price and the word "esists", it should not show the words "doesnotexist", and last it should show the number of bedrooms.

Using Chrome 29 and firefox 23 I only see one record I also see {{beds}} where the number of bedrooms should be, I also see the words "doesnotexist" which shows that the data-binding-hide is not working. Using IE 10 I see everything just fine.

I have also tested this in chrome on my nexus 7 (generation 1) and it does not show it correctly either.
Replied 14 Oct 2013 20:34:20
14 Oct 2013 20:34:20 Jonathan Heintzeman replied:
I have updated to version 1.2 and the problem still exists.
the error:


what it should look like


I found that if I edit your file I can avoid the error:
replace this code:
if(i=this.nodeValue.match(w)){for(var g=0;g<i.length;g++)b.watch(i[g],f);d.push(new A(this))}

with this code:
if(this.nodeValue){if(i=this.nodeValue.match(w)){for(var g=0;g<i.length;g++)b.watch(i[g],f);d.push(new A(this))}}
Replied 14 Oct 2013 20:51:32
14 Oct 2013 20:51:32 Jonathan Heintzeman replied:
Note that the code above does prevent the error and as a result it does load the photos, however it does not solve the problem. The page ends up showing tags that it should be hiding.
Replied 15 Oct 2013 09:10:58
15 Oct 2013 09:10:58 Teodor Kuduschiev replied:
Hello Johnathan,

First - this line of code checks if there is a result returned - true/false or 1/0 if there is a result returned, then it will show the div with the word esist:
<div class="beds" data-binding-show="{{beds}}">esists</div>  

It will not return the number of beds.. If you want to return the number of the beds you should use the {{beds}} data elements as a text binding.

This line of code is not right:
  <div class="doesnotexist" data-binding-show="{{doesnotexist}}">doesnotexist</div>  

You are using some {{doesnotexist}} data element which is not present by your feed actually.
Replied 15 Oct 2013 14:45:00
15 Oct 2013 14:45:00 Jonathan Heintzeman replied:
So basically what you are saying is:
Data-binding-show tests for a VALUE in an EXISTING element, it does not test if the element exists. It will fail if the element does not exist.

I though it would behave the same whether the element existed or was empty.

Is this correct? Could it be adjusted to behave the same whether it is blank or does not exist?
Replied 15 Oct 2013 15:11:33
15 Oct 2013 15:11:33 Teodor Kuduschiev replied:
Hello,

It tests the fields for null or 0 values or if the field is empty.

I think the whole problem on your page is caused by this not-existant attribute/element: {{doesnotexist}} that you are using.
Replied 15 Oct 2013 15:43:54
15 Oct 2013 15:43:54 Jonathan Heintzeman replied:
QuoteI think the whole problem on your page is caused by this not-existant attribute/element: {{doesnotexist}} that you are using.

That must be the problem. I agree.

QuoteIt tests the fields for null or 0 values or if the field is empty.

I will make adjustments to my json to handle this. Instead of removing the empty element I will set it to null.

Reply to this topic