Thanks for posting this here. I'll try to get back to you on this soon... (I just updated above to show the HTML)

Not sure why this would not be working. There is an example here in the samples:

http://borismoore.github.com/jsviews/demos/step-by-step/10_todos.html
https://github.com/BorisMoore/jsviews/blob/master/demos/step-by-step/10_todos.html#L34

Does the sample work for you?

In the example, if I change this line from:

$.observable( Todos.items ).insert( Todos.items.length, { content: this.value, done: false });

to:

$.observable( Todos.items ).insert( Todos.items.length, { content: this.value, done: true });

Then, you can see the issue. The checkbox is not checked when adding a new item.

OK, got it. This should work:

<input data-link="checked{:done} {:done:}" class="check" type="checkbox" />

They way it works is that "foo" is shorthand for "{:foo:}" which is the data linking equivalent of {{:foo:}}

The : on the left says bind to the data as in data-getfrom. The : on the right is optional, and means bind back to the data, as in data-to.

You can add convert and convertBack functions as data-link="{convert:foo:convertBack}"

If you want multiple targets, you prefix the {} with the target, so that means that data-link="check{:done}" is binding the done data to the checked property. Currently JsViews does not know how to do two-way binding on the checked property, so you have to add a separate term to have the two way binding - in fact you are binding on onBlur from the value (the default property for an input) to the data.

I can probably make JsViews know that check is the default property if type is checkbox, so that using data-link="foo" for checkboxes will just work. But for now the syntax above will get the scenario working.

Thank you for your response, and the explanation.

Maybe you can put the "checked{:done} {:done:}" in the "10_todos.html". That's the only place I can find example for check boxes.

A simpler syntax would be good. But as long as there are explanation and examples, it is sufficient.

My project now works fine. Thanks for your wonderful libraries.

Binding to textarea, select, radio buttons and check boxes now fully supported.
Demo here: http://borismoore.github.com/jsviews/demos/step-by-step/07_form-elements.html

Thanks for this update. I will check this out.

--Peter

On Wed, May 9, 2012 at 6:30 PM, Boris Moore <
reply@reply.github.com

wrote:

Binding to textarea, select, radio buttons and check boxes now fully
supported.
Demo here:
http://borismoore.github.com/jsviews/demos/step-by-step/07_form-elements.html

---

Reply to this email directly or view it on GitHub:
#42 (comment)

I tried linking to checkboxes but it is not working completely. in demo 7 you will find on line 57:

<div>Currency Picker: <input type="checkbox" data-link="~app.chooseCurrency" /></div>

This seems to work fine. When you check the checkbox the currency convertor shows. when you uncheck it, it hides again.

Now change line 99 to read like this:

app: {chooseCurrency:true},

This should make the form start with the currency converter visible (after filling in the first fields). The converter does show initially, but the checkmark on the checkbox from line 57 is NOT set.

To me this means data-linking for checkboxes is still broken. It can be worked arround by linking to checked property explicitly, but if this is all working as designed I suggest updating the example to reflect this necessity.

** sorry for multiple edits on this, but git markdown seems to be to complicated for me, and the html won't show without.

reopened to track issue called out by bzuidgeest. I have a fix for this, by the way, but it is part of a much bigger set of changes I am working on, so may not show up immediately...

This has been fixed in latest commit (counter 21). See also the new sample page, which includes radio buttons, at
http://borismoore.github.com/jsviews/demos/step-by-step/08_bit-and-int-converters.html.

if type="ckeckbox" default setting value = 0, change it to value = false.
or
It's working for me with type="selectboxes" instead of type="checkbox".
with json format

{
  'type': 'selectboxes',
    'validate': {
      'required': false
    },
    'persistent': true,
    'protected': false,
    'defaultValue': false,
    'key': '',
    'name': 'checkbox',
    'datagridLabel': true,
    'label': '',
    'hideLabel': false,
    'tableView': true,
    'inputType': 'checkbox',
    'input': true,
}

@omprakash-sharma : I don't understand the comment above. Was this some issue you are raising? selectboxes is not a standard HTML input type...

Not a problem, but trying to understand. So you are using jsviews together with form.io? Are you also using Angular or React. Are you using JsViews data-linking, or just JsRender templates?