An attr:href binding

Motivation

Sometimes we need to have a hyperlink with an address bound to the value of a certain dynamic variable (an observable).

For example, suppose you are making a website for an artist: www.great-artist.com. This website has a gallery for each year available on www.great-artist.com/gallery/YYYY/

Example 1

Let us create an observable:

var addr1=new DB.observable([],{type:"str",
  value:"http://www.great-artist.com/gallery/2010/"});

where addr1 is a string-valued observable.

On the web page we write:

<a db="attr:href:addr1">Link to the paintings depicted during the specified year</a>

Now after our web page loads DB.js and activates it, this link will point to the paintings created in 2010.

Example 2

To complicate the previous example, let us this time create two observables:

var year2=new DB.observable([],{type:"int",value:2010}),
    addr2=new DB.observable([year2],{type:"str",
  compute:()=>"http://www.great-artist.com/gallery/"+year2()+"/"});

where we defined 2 observables:

• integer-valued year2 with the initial value 2010, and
• string-valued addr2 derived from year2.

Let us use addr2 to set the link address, and year2 – to update its text:

<a db="attr:href:addr2">Link to the paintings created
            in <span db="text:year2"></span></a>

At this point we could open debugger console in the browser and evaluate

year2(2011);

Instead of the debugger console, one can use add input element to our web page bound to year2:

<label>Choose the year:
<input type="number" min="2005" max="2015" db="value:year2">
</label>

In this way we have bound input element to a (http link) via two observables: year2 and addr2.

Notes

• See also ex-href.html and ex-href.js with the above code. In order to test them on your server, place both files together with DB.js in a directory and update the location of DB.js in the HTML.