attaching complex object literals to HTML templates

Question

I'd like to know if it's possible to attach a complex object in some way to a template so I can reference it later. 

So say I've got a javascript function which serves as my template, it's trivial to attach an object literal to a dynamic value and then reference it again later when that object gets clicked on. A use case for this be say you have a search result template and you want to take the user to a details page dependant on what the user clicked.

So if I have a js template I can do this where I attach my data to the dynamic property .trxnsData :

function TrxnItemTemplate(itemPromise) {
        return itemPromise.then(function (currentItem) {
            
            var result = document.createElement("div");
            result.trxnsData = currentItem.data;
            result.className = 'transactionItemTemplate';
    
            result.addEventListener('click', openTrxnCard);

            return result;
        });
    }

then I could reference that later in my handler to know what results to bring up, like so:

 function openTrxnCard(args)
    {
      window.getRelatedTransactions({
        transaction: args.currentTarget.trxnsData,
        successCallback: function (args) {
          //openTransactionCardPopUp(args);
          transactionCard.openTransactionCard(args);
        },
        errorCallBack: function (xhr, status, thrownError) {
          console.log('could not open transaction/s');
        }
      });
    }

So my situation is this: I have a some complex HTML templates that I don't want to convert to javascript templates just to add this functionality. Is there a way I can attach some custom data to a HTML template? 

Answer 1

You could either use something like jQuery.data() to store your object, or you could stringify the object using JSON.stringify() and then store it in an attribute on the object via something like:

var obj = { hello: "world" },
    elem = document.getElementById("testElem");

elem.setAttribute("data-cache", JSON.stringify(obj));

obj = JSON.parse(elem.getAttribute("data-cache"));

I think jQuery.data might be the better solution here, but both should be valid options.

Answer 2

Hi Syllogism,

As got.dibbs has suggested, you can either use JQuery.data API to attach custom js objects to a DOM element or attach the JSON object (serialized to string via JSON.stringify) to DOM element via a custom attribute.

In addition, you can also consider only storing the id or index of the custom object in a cusotm attribute of the certain HTML DOM element. Then, whenever you want to reference the object from the HTML element, call some helper function to map the id/index value to the actual JSON object.

 

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 3

ok but how would I get a function to execute and attach this to my template when I'm using a HTML template? I mean when you specify a function as a template it's easy but when you specify a HTML template is there a way to get a function to run and attach this data-cache value to each item since it's not possible to bind to a value of data-cache using data-win-bind

Answer 4

I think you can try the following approach:

• Use WinJS.Namespace.define to define a script function which can be accessed directly in HTML markup. Also, the function can use "event.srcElement" to get the element which trigger the event and look for any custom attributes bound to it. e.g.
  
  

WinJS.Namespace.define("MyHandlerUtils",
{
MyButtonClickHandler: function(){
// get the button element first
var btn = event.srcElement;
// look for attributes on button element
}
}
);

• Use data-win-bind to add a custom attribue to the certain element. For example:
  
  

<button  data-win-bind="mydataid: idproperty" onclick="MyHandlerUtils.MyButtonClickHandler();"  >

You can extend this approach to more complicated scenario.

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 5

thanks! this worked perfectly!