Correct syntax for binding to a form in jsviews (commit 26)

Question

I am experimenting with Boris Moore's jsrender/jsviews libraries and am using the current version at the moment (commit 26). (I realize the API is in flux but would like to practice using it)

I've looked at the demos here: http://borismoore.github.com/jsviews/demos/index.html

But I am having trouble determining the data-link syntax. In some of the demos the syntax is data-link="{:FirstName:}

I don't understand why the 2 colons. I assume the 1st colon means no HTML encoding would be done, but have no idea about the 2nd one.

In other places I see syntax like data-link="address.street" Here there are no curly braces or colons at all. I wonder when you need them and when you don't. Also I don't follow how you would specify if you want one-way or two-way binding. Or if you wanted binding to trigger in response to a key press instead of blur.

Here's an example I'd like to setup properly:

<div id="form">
    <p>
        <label>First Name</label>
        <input type="text" name="FirstName" data-link="FirstName"/>
    </p>
    <p>
        <label>Last Name</label>
        <input type="text" name="LastName" data-link="LastName"/>
    </p>
    <p>
        <label>Full Name</label>
        <input type="text" data-link="FirstName + ' ' + LastName"/>
    </p>
    <p>
        <label>Gender</label>
        <select name="Gender">
            <option value="U">Unknown</option>
            <option value="M">Male</option>
            <option value="F">Female</option>
        </select>
    </p>
</div>
<script>
   var data =
   {
      FirstName: "Bill",
      LastName: "Willis",
      Gender: "M"
   };

   $("#form").link(true, data);  //What is the 1st parameter (true) about?
</script>

I don't know how to bind to the select control.

I'd appreciate any explanation of how this should be done.

BorisMoore BorisMoore · Accepted Answer · 2013-02-17T22:20:22

data-link="a.b.c" is the shorthand syntax, and is equivalent to the full syntax data-link="{:a.b.c:}" on inputs (which gives you two-way binding) and data-link="{:a.b.c}" for most other elements (i.e. not form elements for user input, so of course it is one-way binding).

See https://github.com/BorisMoore/jsviews/issues/136 for some details.

If you want to do non-default binding you use the full syntax, e.g. with convert or convertBack as in data-link="{cvt:a.b.c:cvtBack}", or one-way binding on an input, as in data-link="{:a.b.c}".

So the colons both specify the direction of the binding, and allow you to add a converter for that binding.

One-way 'to source' is not currently directly supported, but is possible by using converters. Binding to select is shown in several examples, such as this one, or this one.

Currently the trigger is onblur (or onchange) - but it will soon be possible to set that declaratively too. Right now it requires code to achieve it - as in this example.

The code for all the demos is here.

Correct syntax for binding to a form in jsviews (commit 26)

1 Answers