How to make an helper method return a part of the HTML only once?

Question

Latest Edit: I added my solution at the end of the question, based on chrisvillanueva's answer

I have an helper method that creates a button, when this button is clicked a dialog appears (jQuery UI dialog), the button appears more than one time on the page.
The helper method contains parts that I want to render only once like the javascript code and the HTML for the dialog that appears when the button is clicked. (basically the only thing that should be rendered multiple times it the HTML of the button itself)

To make sure the javascript is loaded only once I am using Cassette (http://getcassette.net/), but I can't find a nice solution for the dialog's HTML, I saw Cassette had HTML Templates but it is quite complicated because the HTML is rendered in a script tag.

currently my workaround is to use Cassette's HTML Template and in the templates I start with and end with , this way it eliminates the wrapping block and the HTML is rendered by the browser - I know, it's terrible... :/
This is the HTML I am currently using with Cassette's HTML Templates

</script> <!-- This closes the starting <script> that is generated by Cassette -->
<div class="recommendDialog" title="Recommend This Goal To A Friend">

</div> 
<script> <!-- This is for the closing </script> that is generated by Cassette -->

would appreciate any ideas, preferable something with Cassette or built-in in MVC3 (I prefer not adding more libraries)

EDIT: also maybe there is an easy way to use jQuery UI's dialog with html that is inside a script block (I tried playing with it and searching but couldn't find anything other than "pushing" the content into another html element)

Example Code:

@helper BarControl(WebViewPage<MyModel> page)
{ 
    // Currently using Cassette for javascripts
    Cassette.Views.Bundles.Reference("barcontrol", "body");

    // I tried using Cassette HTML Templates but the rendered HTML is in a <script> tag
    // which I can't use with jQuery UI's dialog widget
    // Cassette.Views.Bundles.Reference("barcontroltemplates", "body"); 

    // This HTML is for the dialog, should only be rendered once in the final HTML
    <div class="dialog" title="I'm a dialog">
        <span>I'm a dialog</span>
    </div> 


    // This is the HTML for the button which should be rendered every time this helper is called
    <div class="area">
        <div class="right">
            <ul>
                <li id="button"><a href="#">I'm a button</a></li>
            </ul>
        </div>
    </div>
}

the javascript just sets a click event on the button with $(".dialog").dialog()

What I ended up doing:
Based on chrisvillanueva's answer. I use Cassette's HtmlTemplates which renders this HTML:

<script id="dialogHtmlTemplate" type="text/html">
    <div class="dialog" title="dialog">    
        <span>Content of dialog</span>
    </div> 
</script>

in order to use this with jQuery UI's dialog (http://api.jqueryui.com/dialog/) I use the following code: $($("#dialogHtmlTemplate").html()).dialog() this renders the html by the browser and creates the dialog around it, it works without adding more libraries like mustache.js or jQuery Templates which for the above situation(no templates just repeating ) are not needed.

Performance-wise I don't think it's the best solution (it copies the inner-html every time) but for now it's good enough...

Answer 1

I've used html templates/partials with mustache.js and angularJS in large web applications. The idea with html templates is to repeat one block of markup over and over in specific places it's needed. If cassette provides this feature, you should use it rather than using a workaround. You might even be better off creating the button with jquery and appending it to areas it needs to be. Then you create a click handler for the dynamic button so it will render a jquery ui modal.

Here's some pseudo code to give you more about my idea..

...

$("<button class='dButton'> your button</button>").appendTo('your target selector');
$('a wrapper div on your page').on('click','.dButton',function(e){
      e.preventDefault();
      //put code here to show your jquery ui modal
});

here's some information on the appendTo method:

appendTo() documentation

This is just one approach, but it's hard to help you with cassette with no sample code available.