locked
Can you not data-win-bind a data-* HTML attribute?

    Question

  • Example:
    <img data-win-bind="src: icon; data-typelink: typelink" style="width: 730px;height: 295px;" />

    I would expect this to make an image with an attribute of data-typelink="category,44" with data-typelink as the attribute type, and bound to the typelink for the value.

    But is seems to output this as the attribute and value:
    <img style="width: 730px; height: 295px;" src="" data-win-bind="src: icon; data-typelink: typelink"></img>

    Seems to be a major bug, than you cannot data-win-bind to create a data-* attribute.

    Thursday, May 24, 2012 8:36 PM

All replies

  • Hi Harlequin,

    Off the top of my head I am thinking that there is likely indeed a schema check that is going on which is causing this behavior (though I am sure there are better experts that will answer this).

    I'm sure you thought of overloading a different, non-essential attribute to store this data, but I hear your pain.

    I'll do a little playing with namspaces.

    Thursday, May 24, 2012 9:18 PM
  • Yeah, I thought that as well. Tried to make an attribute of "test" or something uncommon and it doesn't render the new attribute. I just threw my stuff into the alt tag for now. But yeah, I think the schema for data-win-bind only allows "legal" attributes for whatever HTML tag you're in...thus I think the exclusion of data-* is a big bug.
    Thursday, May 24, 2012 9:28 PM
  • The properties you specify in data-win-bind syntax are the JavaScript property names, not the HTML attribute names, so data-typelink isn't legal in the first place. If the element had a dataTypelink attribute already, then this would work, but since that's not true for an img element, WinJS is likely ignoring the property altogether.

    Do note that if you're using this syntax within a template for rendering in a listview, you can use a function instead of the declarative template. In that case you'll have the item data directly and can assign property values in JavaScript.

    Friday, May 25, 2012 12:14 AM
  • Thanks. But I still see this as a major issue, if data-* attributes cannot be used with data-win-bind. This is HTML5 after all. If we're forcing developers to inject the data-* attributes in the unfun environment that is WinJS, that will only cause more frustrations. If data-win-bind uses the JavaScript property names, then that is fine, but there needs to be a way to have non-JavaScript property bindings...because data-* attributes are legal attributes in HTML5. My data-typelink might not be a legal JavaScript property name, but it is a legal HTML5 attribute.

    Edit. Here is an example of something I would expect in terms of this functionality:
    <img data-win-bind="src: icon; data-typelink: typelink WinJS.Binding.customProperty" />

    • Edited by Harlequin Friday, May 25, 2012 2:30 PM Add example...
    Friday, May 25, 2012 2:06 PM
  • I did some more checking and there is actually a way to do this within the WinJS data-win-bind mechanism: specify this['data-typelink'] as your source. (This actually works for any property that has a name with hyphens.

    This will create a property on the target object (your img), which you can then access by the same means (element['data-typelink']).

    If, however, you want to create an actual attribute on the element, as if you'd processed HTML, then today you'll need to create your own binding initializer (like the WinJS.Binding.customProperty you suggest). In that you can use element.setAttribute to create the attribute.

    Do know that this request is known, since it applies to aria-* attributes, so a general solution is in the works as you suggest.

    .Kraig

    P.S. Do understand that WinJS is simply adding helpful functionality that apps typically need, but does not force you to use things like its declarative binding process. There are functions like WinJS.Binding.bind that you can use to set up the same relationships in JavaScript in place of calling WinJS.Binding.processAll, allowing you to have fuller control over the process. But as I've explained, there are ways to hook into the declarative mechanism that does what you want.

    • Proposed as answer by pkursawe Monday, March 24, 2014 1:37 AM
    • Unproposed as answer by pkursawe Monday, March 24, 2014 1:38 AM
    Saturday, May 26, 2012 4:22 AM
  • Not sure I understood, was this supposed to work?
    <img data-win-bind="src: icon; this['data-typelink']: typelink" />

    And it doesn't make an actual attribute by the sounds of it, does it just work like the Tag attribute in Silverlight then? An attribute with an object inside...without being an actual attribute in the DOM?

    Monday, May 28, 2012 2:23 PM
  • This syntax should create a property on the img element, if you look at that element in the debugger. It won't be a DOM attribute, just a property hanging off the object (and that property could be an object). I don't know about how it compares to Silverlight--I'm not much versed in that area.
    Tuesday, May 29, 2012 2:54 AM
  • Not sure I understood, was this supposed to work?
    <img data-win-bind="src: icon; this['data-typelink']: typelink" />

    And it doesn't make an actual attribute by the sounds of it, does it just work like the Tag attribute in Silverlight then? An attribute with an object inside...without being an actual attribute in the DOM?

    you were almost close...

    try this:

    <img data-win-bind="src: icon; this['data-typelink']: typelink WinJS.Binding.setAttribute" />

    sorry this feature is missing from library, but it works.



    Ranger Yu
    Partner Online Technical Community
    -----------------------------------------------------------------------------------------
    We hope you get value from our new forums platform!
    Tell us what you think:
    http://social.microsoft.com/Forums/en-US/partnerfdbk/threads
    ------------------------------------------------------------------------------------------
    This posting is provided "AS IS" with no warranties, and confers no rights.

    • Proposed as answer by pkursawe Monday, March 24, 2014 1:37 AM
    Friday, November 16, 2012 2:16 PM