Skip to content

Loading…

Data Linking and Element Attributes #127

Closed
benmetheny opened this Issue · 9 comments

2 participants

@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/}}>
<!-- more template markup -->
</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
Owner

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
Owner

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: benmetheny@5fd891c

@BorisMoore
Owner

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

@BorisMoore
Owner

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
Owner

@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
Owner

OK - good. thx. Closing.

@BorisMoore BorisMoore closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.