javascript - Knockout template and unique ID within complex web app causing problems -

javascript - Knockout template and unique ID within complex web app causing problems -

knockout templating scheme great, in web app there several separated contexts ("views") loaded ajax, 1 issue appears:

templates rely on id

this means if chance have 1 template same name on view on view loaded , still existing in webapp context, knockout (because browser this) take first matching #templateid element.

on our webapp, eliminated id of our elements, , when needs used, it's id javascript determined not have duplicates.

some views can loaded multiple times in lifetime of app, no, can't "simply check if id used before making html code" our team members.

the other thing check if specific template loaded, , if not load in async, apply bindings. simplicity purpose , way our project set right now, can't apply js amd-like dependency manager.

questions

is possible specify straight dom reference template directly?

data-bind="template:function(){ homecoming $('yourselectortothetemplate')[0]; }"

i've looked knockout code , it's weird because have this:

templatedocument = templatedocument || document; var elem = templatedocument.getelementbyid(template); if (!elem) throw new error("cannot find template id " + template); homecoming new ko.templatesources.domelement(elem);

this means utilize dom element, why beingness forced give id if have id?

how retrieve dynamically applied idtemplate, calling dynamically applied id (template recursively calling example)?

setting id binding handler may wrong: may set id after other info bound elements referred it, simpler have to.

the best solution found moment:

place templates (script element) @ top of html view. use bindinghandler initialization (i called mine "init" can see in illustration below) set id of script element store id within $root context can reused other elements

the result looks this:

<script type="text/html" data-bind="init: function(){ $rawdata.folderitemtemplate = functionthatsetsandreturnsuniqueid($element, 'folderitemtemplate'); }"> <li> item <ul data-bind="template: { name: $rawdata.folderitemtemplate, foreach: children }"></ul> </li> </script>

as can see can utilize template binding template: { name: $rawdata.yourpropertyname, foreach:... }

javascript templates knockout.js