If I have a TypeScript object declared in my view like this:
<script type="text/javascript">
var myTSObject = Module.CustomClass('#someId');
myISObject.bind();
</script>
Now, if I need to manage a click event from within the element containing the <script> tag:
<div id="thisDiv">
<script type="text/javascript">
var myTSObject = Module.CustomClass('#thisDiv');
myISObject.bind();
</script>
<button onClick="myISObject.handleClick()" />
</div>
Everything seems fine so far. However, what happens when I use the above code snippet as a template and it gets replicated multiple times in the generated view?
<div id="thisDiv">
<script type="text/javascript">
var myTSObject = Module.CustomClass('#thisDiv');
myISObject.bind();
</script>
<button onClick="myISObject.handleClick()" />
</div>
<div id="thatDiv">
<script type="text/javascript">
var myTSObject = Module.CustomClass('#thatDiv');
myISObject.bind();
</script>
<button onClick="myISObject.handleClick()" />
</div>
In such a scenario, there may be conflicts as the second instance of myISObject overrides the first one. Given that the <div>...</div> block functions as a template, it's not feasible to hardcode the JavaScript variable name. How can this situation be properly managed?