WinJS, data-win-bind for script controlled binding?

Question

I'm working on a Windows 8 App in HTML5/Javascript. I created a custom control that uses a stack of DIVs to display content, and each DIV is rendered using WinJS.Binding.Template. The setup is close to the answer in this question: WinJS.UI.ListView customize list item content? .

The binding data is close to:

[
    {
        "title": "title name",
        "allow_action": false
        "action_type": "go"
    },
    ...
]

And my template is close to:

<div id="entry" data-win-control="WinJS.Binding.Template">
    <div data-win-bind="textContent: title">
    </div>
    <a class="action">Action</a>
</div>

Upon binding, I would like to:

Change the className of a.action based on the value of allow_action and action_type.
Attach an event (addEventListener) to a.action upon binding, based on the contents of the binding data. This includes allow_action, action_type and other values.

Basically, I wish to have a pre-binding or post-binding callback function, with the element, and bind data as arguments. This doesn't appear to be possible with converters because converter doesn't let you access other fields.

Meanwhile I'm manually processing these things with DOM after render. I'm wondering if there are better options available. Thank you.

Update

As suggested by @GotDibbs and @RSW in the comments, I managed to solve problem #1 using the solution from Sending multiple parameters to WinJS.Binding.converter() function . I'm wondering if #2 is still possible?

If you bind something to this instead of specific property, you can access your entire model from the converter. Also, there is no pre-bind or post-bind callback function that I'm aware of short of the promise returned from WinJS.Binding.processAll(). You may need to look into having the CSS class name and the event handler right on the object you're binding. — GotDibbs
He gives an example of binding to 'this' here: stackoverflow.com/a/14715804/1309005 — RSW
@RSW, thank you very much. I managed to get the solution from stackoverflow.com/questions/14713927/… working in my own project. — He Shiming
I'm not at a computer that is capable of trying this out, but can't you setup a binding for the event you want to handle, bind it to your model with this again, and use a converter to redirect it to the actual handler you want to use? — GotDibbs

GotDibbs GotDibbs · Accepted Answer · 2013-02-19T04:57:35

You should be able to achieve what you're looking for by binding the event and className property on the desired element to your model, just like with the previous answer mentioned in the comments. Therefore assuming you want to bind the click event, your anchor tag would look more like this:

...
<a data-win-bind="className: this Converters.getItemClassName; onclick: this Converters.getItemClickHandler">Action</a>
...

WinJS, data-win-bind for script controlled binding?

1 Answers