CODEWITHSUNDEEP
javascripthtmlwindows-8winjs
He Shiming
He Shiming

Reputation: 5819

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

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:

  1. Change the className of a.action based on the value of allow_action and action_type.
  2. 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?

Upvotes: 2

Views: 1864

Answers (1)

GotDibbs
GotDibbs

Reputation: 3167

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>
...

Upvotes: 3

Related Questions