Data-link Select tag with multiple targets

alnico2001 commented 6 years ago

Testing with top example on this page: http://www.jsviews.com/#link-select Data-linking between the two Selects works in the example on this page, but if I try to add another target then it does not work.

In the first Select example replace data-link="selectedCar" with data-link="value{:selectedCar}" (or) data-link="{:selectedCar}" (this is the syntax that is required for multiple targets as I understand)

Now choose an option from the first Select...it does not update the second Select on the page. However, if I choose an option from the second Select...it does update the first Select.

My ultimate goal is to do this: data-link="value{:selectedCar} css-background-color{:selectedCar == 'vlv' ? 'green' : 'red'}"

Paste this html snippet in the above page to test:

<div id="result"></div>

<script id="tmpl" type="text/x-jsrender">
  <select data-link="value{:selectedCar} css-background-color{:selectedCar == 'vlv' ? 'green' : 'red'}">
    <option value="">Choose a car</option>
    <option value="vlv">Volvo</option>
    <option value="frd">Ford</option>
  </select><br/><br/>

  <select data-link="selectedCar" size="3">
    <option value="">Choose a car</option>
    <option value="vlv">Volvo</option>
    <option value="frd">Ford</option>
  </select><br/>

  <span class="spanbox" data-link="selectedCar||'none'"></span>
</script>

BorisMoore commented 6 years ago

You need to specify two-way data binding - with the :}

<select data-link="{:selectedCar:} css-background-color{:selectedCar == 'vlv' ? 'green' : 'red'}">

There is a similar example lower in the page:

<select data-link="{:selectedCar:} size{:cars.length + 1}">

Note that adding explicit targets such a size{} or value{} is only used for one-way binding. So the following is incorrect:

<select data-link="value{:selectedCar:} ...">

I'll add a syntax error message for that...

alnico2001 commented 6 years ago

Ah ha, I think I forgot about the "Abbreviated syntax and full syntax for data-link" as specified on this page. http://www.jsviews.com/#link2way

I knew that full syntax was needed for multiple targets, but forgot that data-link="name" is the shortcut for data-link="{:name:}". I won't forget again ;-) ...and a syntax error would be great.

Works perfect now, thank you!

BorisMoore commented 6 years ago

Syntax error for this included in commit 89

BorisMoore / jsrender

Data-link Select tag with multiple targets #329