Button with handler and bound tag attributes

Question

I want to define in a jsviews template a button that have both click handler and data bound property.

Assuming I have this data:

var data = {
    Enable : true,
    DisplayName : "foo",
    SomeData : 42
};

This helpers :

var handlers = {
    fooClicked : function(data, evt) {
        console.log(arguments);
    }
};

How to add a button in my template to plumb the event handler and the properties of the button ?

I tried :

• <button data-link="{on ~onAvailabilityClick SomeData disabled:^{!Enable}}"> {^{>DisplayName}} </button>
• <button data-link="{on ~onAvailabilityClick SomeData} disabled:^{!Enable}"> {^{>DisplayName}} </button>
• {^{on ~onAvailabilityClick SomeData}}<button data-link="disabled:^{!Enable}"> {^{>DisplayName}} </button>{{/on}}

But none of these works (either template syntax error or incomplete button, like having no text, or no handler).

I'm using jsViews 0.98.4.

PS: I don't know if it matters, but actually, my template is fed within a for loop, for an deep object structure.

Answer 1

You can find documentation on setting multiple data-link bindings, and other related topics here:

• http://www.jsviews.com/#linked-elem-syntax@fullsyntax
• http://www.jsviews.com/#link-elemattribs
• http://www.jsviews.com/#link-tags
• http://www.jsviews.com/#link-events

In your case, you need to write

<button data-link="disabled{:!Enable} {on ~onAvailabilityClick SomeData}">
     {^{>DisplayName}}
</button>

or if you prefer:

<button
  data-link="disabled{:!Enable} {on ~onAvailabilityClick SomeData} {:DisplayName}">
</button>