JsViews : two-way binding issue

Question

When you bind an additional attribute in data-link, the default bindng and trigger=true stopped working. There is no error or anything obvious. But it doesn't work.

default binding

In this example (http://jsfiddle.net/BorisMoore/wch601L9/ ), the "amount" property is binded without setting the attribute (e.g. value{:amount} ) explicitly. It works!

<td><input data-link="amount trigger=true" /></td>

If you change this code by adding an additional binding, the default binding "amount" doesn't show in textbox anymore.

<td><input data-link="amount trigger=true disabled{:isSameAmountForAll}" /></td>

Here (http://jsfiddle.net/michaelsync/xzo15n0s/) is my fork version of BorisMoore's example and I made the changes to show this scenario.

The solution that I found is to set the attribute name for all bindings explicitly.

<td><input data-link="value{:amount} trigger=true disabled{:isSameAmountForAll}" /></td>

Is it the known issue?

trigger=true

If you enter some numbers in textbox (sample example http://jsfiddle.net/michaelsync/xzo15n0s/), you will see that the total doens't get updated.

I am not sure how to workaround this. Is it also an known issue?

Feel free to let me know if this question is not clear. Thanks!

Note: If you are wondering why I want to bind two attributes then this is the sample that I am testing. http://jsfiddle.net/michaelsync/078cazh8/2/

Updated #1:

I am debuging the JsViews source code now. I modified my code sample to debug.

Here is v1. http://jsfiddle.net/michaelsync/tmwyhc7n/1/

Template with only one binding

<script id="personTmpl" type="text/x-jsrender">
    <input data-link="amount trigger=true" /> <br/>
</script>

<div id="placeholder" ></div>

JS

var myTemplate = $.templates("#personTmpl");

var people = [
  {
    name: "Adriana",
    amount:  10,
    isSameAmountForAll: false      
  }
];

myTemplate.link("#placeholder", people);

I set the breakpoint at function parseTag(all, bind, tagName, converter, colon, html, comment, codeTag, params, slash, closeBlock, index)

I got only hit and the value of "all" parameter is ""{{:amount trigger=true}}""

Now, I added additional binding as below.

<script id="personTmpl" type="text/x-jsrender">
    <input data-link="value{:amount} trigger=true disabled{:isSameAmountForAll}" /> <br/>
</script>

<div id="placeholder" ></div>

V2: http://jsfiddle.net/michaelsync/tmwyhc7n/2/

then I got two hits because I bind "amount" and "isSameAmountForAll".. U see "trigger=true" is missing in parsing.

So.. I moved "trigger=true" inside the amount .

<script id="personTmpl" type="text/x-jsrender">
    <input data-link="value{:amount trigger=true}  disabled{:isSameAmountForAll}" /> <br/>
</script>

<div id="placeholder" ></div>

V3: http://jsfiddle.net/michaelsync/tmwyhc7n/3/

Updated #2:

The parsing seems correct but ObserverAll doesn't work..

I changed the code below to detect the amount changes but the event doesn't get triggered.

// http://stackoverflow.com/questions/25721180/summary-value-calculation-with-jsviews

var myTemplate = $.templates("#personTmpl");

var people = [
  {
    name: "Adriana",
    amount:  10,
    isSameAmountForAll: false      
  }
];

myTemplate.link("#placeholder", people);

$.observable(people).observeAll(function() {
    console.log('weird stuff');
});

V4: http://jsfiddle.net/michaelsync/tmwyhc7n/4/

BorisMoore BorisMoore · Accepted Answer · 2014-09-25T17:55:13

You need

<input data-link="{:amount trigger=true:}  disabled{:isSameAmountForAll}" />

http://www.jsviews.com/#linked-elem-syntax

To have multiple bindings, each binding needs to be full syntax (with the {...}). For a two-way binding it needs to use the default binding target (attribute) - so don't specify a target attribute:

{:amount trigger=true:}.

For one-way bindings you can specify other targets such as disabled:

disabled{:isSameAmountForAll}.

JsViews : two-way binding issue

1 Answers