Data Linking and Element Attributes

[benmetheny]

I know that using the linking syntax with element attributes is not supported, just wondering on possible workarounds I can use in this scenario, which works in jsRender but I need to convert it to work with linking.

I have a custom tag defined as:

clickAction: function (optionalData) {
var data = optionalData ? optionalData : this.tagCtx.view.data.ClickAction;
if (data) {
var templateId = "ClickAction_" + data.ItemStyle;
if (!this.tagCtx.props)
this.tagCtx.props = {};
this.tagCtx.props.link = false;
this.tmpl = $.templates[templateId];
return this.renderContent(data);
}
return "";
}

my template markup looks like this:

href="javascript:"
{{if Id != ""}}id="{{>Id}}"{{/if}}
{{>EventName}}="{{>EventAction}}"
click-action="{{stringify/}}"

Here is an example of usage:

{{for ListItems link=true}}
<li data-link="class{:Properties.Selected ? 'bt clicked' : 'bt'}">
<a class="row clickable" {{clickAction/}}>

</a>
</li>
{{/for}}

Notice that in the custom tag function I'm setting props.link = false, this makes the attributes render correctly, but I run into exceptions when removing views then relinking. If link=true then the attributes are instead rendered as content.

Is there something I can do to make linking work with element attributes? I'm using this to dynamically set the 'eventName' and 'eventAction' (other attributes are superfluous and could be removed) like onclick/onchange to what is defined server side. I imagine I can get around this by using an 'afterLink' hook to just walk my view to add this info, but I would like to keep it templatized if possible.

[BorisMoore]

Not been able to get to this yet. It may take me a while, but hope to look more closely and offer suggestions, when I am able to at some point.

[benmetheny]

OK thanks. I was able to get this working with a couple mods, but it's just a band-aid that allows the removeViews function to execute successfully when the is a view that is not linked in the hierarchy.

If there is any interest I can post the changes I made, otherwise I'll just wait for an update.

[BorisMoore]

Yes, go ahead and show your new version, that would be fine...

[benmetheny]

OK, I forked and added the changes I made. You can view it here: https://github.com/benmetheny/jsviews/commit/5fd891c1e02d08286b8eaa0da4cd170aa830006e

[BorisMoore]

Thanks. I'll look at that when I get to this...

[BorisMoore]

Is there any reason you can't just use data-link="click-action{:stringify} ... other targets"

For {>EventName}}="{{>EventAction}}" you can write a custom tag which sets the attribute, and use it in the data-link too, as in data-link="{myeventtag name=xxx action=yyy} click-action{:stringify} ... other targets" - where {{myeventtag ...}} is a custom tag.

[BorisMoore]

@benmetheny: There is now a tutorial sequence here http://www.jsviews.com/#samples/data-link. Can you take a look and see if your requirements are covered. If not, let me know. Otherwise, we can close this...

[benmetheny]

This looks like this will cover my scenario. I'm going to look at implementing this today. I'll report any problems but for now you can consider the issue closed.

[BorisMoore]

OK - good. thx. Closing.