Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

What is the syntax for data-linking to multiple targets? #136

Closed
iboware opened this Issue Dec 26, 2012 · 2 comments

Comments

Projects
None yet
2 participants

iboware commented Dec 26, 2012

I have a select control which updates the Type property in data, and I have a TAG Control which depends on Type and the Value. When I add an extra data link for the disabled attribute of the select, Type field loses it's observable feature or it does not trigger events in the tag.

Working:

<select data-link="Type"> ... </select>
{^{CustomField Type Value //}}

Not Working:

<select data-link="Type, disabled{:ID?'disabled':''}"> ... </select>
{^{CustomField Type Value //}}
Owner

BorisMoore commented Dec 26, 2012

Updating the title to make it more discoverable for others.
Also updating with changes resulting from commit 27. (See #146 for context).

The data-link syntax comes in two flavors. Full syntax, and abbreviated syntax.

The full syntax allows you to bind multiple expressions each to a different target 'attrib', and is written like this: data-link="attrib1{linkExpression1} attrib2{linkExpression2} ...".

attrib corresponds to the target - such as the following:

  • HTML attribute (such as title{...} or id{...} or data-foo{...})
  • CSS property (such as css-background-color{...})
  • innerHTML (as in html{...})
  • innerText (as in text{...})
  • special targets like visible{...}
  • or can be missing altogether (as in {...}) in which case it stands for the default target for the element.

The default target for most elements is innerHTML or innerText, but for inputs and select it is value.

The linkExpression {...} is like a JsRender tag, such as {{:a.b.c}} or {{myCustomTag .../}} except that you only put a single curly brace to delimit, and you don't put the self-closing /, which is assumed.

So examples would be:

  • <div data-link="{:name}"></div> (one-way binding to innerText - default target attrib - so automatically HTML encodes).
  • <div data-link="html{:name}"></div> (one-way binding to innerHTML)
  • <div data-link="text{:name}"></div> (one-way binding to innerText)
  • <div data-link="{>name}"></div> (one-way binding to innerHTML but with HTML encoding)
  • <input data-link="{:name}" /> (one-way binding to value - default target attrib)
  • <input data-link="value{:name}" /> (one-way binding to value)
  • <input data-link="title{:name}" /> (one-way binding to the title attribute)
  • <input data-link="{cvt:name:cvtBack}" />(two-way binding to value, with converters)
  • <input data-link="{cvt:name:cvtBack} title{:info.description}" />(two-way binding to value, with converters and one-way binding to title)
  • <div data-link="{myCustomTag name}"></div> (data-linking a JsViews custom tag control - rendering as innerHTML - default target attrib for tags other than {: ...} - so can insert HTML markup)
  • <div data-link="text{myCustomTag name}"></div> (data-linking a JsViews custom tag control - rendering as innerText - so automatically HTML encodes)

The abbreviated syntax is an alternative syntax when you only have a single expression of the form {:someExpression}, or in the case of inputs {:someExpression:} (two-way binding). So it is using the default target attrib, and is targeting innerText, and automatically doing HTML encoding. In that case you can remove the {} delimiters and colons and just write the someExpression. JsViews will expand your expression to the full syntax. Example: data-link="name".

So if you need any of the following, you need to switch to the full format:

  • insertion of HTML markup as innerHTML: (switch to html{:someExpression})
  • converters
  • different target 'attribs'
  • multiple bindings

Make sense?

In your case above you therefore need to write select data-link="{:Type:} disabled{:ID}">. You'll find quite a few examples in the samples, such as here: http://borismoore.github.com/jsviews/demos/step-by-step/03_top-level-linking.html

iboware commented Dec 26, 2012

Thank you for this detailed answer & guide. I'm sure this will help lots of people in my condition.

@iboware iboware closed this Dec 26, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment