Как заставить вспомогательный метод возвращать часть HTML только один раз?

Question

Последнее редактирование: я добавил свое решение в конце вопроса, основываясь на ответе chrisvillanueva

У меня есть вспомогательный метод, который создает кнопку, при нажатии этой кнопки появляется диалоговое окно (диалоговое окно jQuery UI), кнопка появляется более одного раза на странице.
Вспомогательный метод содержит части, которые я хочу визуализировать только один раз, например, код JavaScript и HTML-код для диалогового окна, которое появляется при нажатии кнопки. (в основном единственное, что должно быть несколько раз визуализировано, это HTML самой кнопки)

Чтобы убедиться, что javascript загружен только после того, как я использую кассету (http://getcassette.net/), но я не могу найти хорошее решение для HTML диалога, я увидел, что у кассеты были шаблоны HTML, но это довольно сложно, потому что HTML-код отображается в теге скрипта.

в настоящее время мой обходной путь заключается в использовании HTML-шаблона Cassette и в шаблонах, с которых я начинаю и заканчиваю, таким образом он устраняет блок переноса, а HTML-код отображается браузером - я знаю, это ужасно...:/
Это HTML, который я сейчас использую с HTML-шаблонами кассет

</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 -->

Буду признателен за любые идеи, желательно что-то с кассетой или встроенным в MVC3 (я предпочитаю не добавлять больше библиотек)

РЕДАКТИРОВАТЬ: также, возможно, есть простой способ использовать диалоговое окно jQuery UI с html, которое находится внутри блока скрипта (я пытался поиграть с ним и поиск, но не смог найти ничего, кроме как "вставить" содержимое в другой элемент HTML)

Пример кода:

@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>
}

JavaScript просто устанавливает событие нажатия на кнопку с $(".dialog").dialog()

Что я в итоге сделал:
На основании ответа chrisvillanueva. Я использую кассетный HtmlTemplates, который отображает этот HTML:

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

чтобы использовать это с диалогом пользовательского интерфейса jQuery ( http://api.jqueryui.com/dialog/), я использую следующий код: $($("#dialogHtmlTemplate").html()).dialog()это отображает HTML браузером и создает вокруг него диалог, он работает без добавления дополнительных библиотек, таких как mustache.js или jQuery Templates, которые для описанной выше ситуации (без повторяющихся шаблонов) не нужны.

С точки зрения производительности, я не думаю, что это лучшее решение (оно каждый раз копирует inner-html), но пока это достаточно хорошо...

Answer 1

Я использовал html шаблоны / партиалы с mustache.js и angularJS в больших веб-приложениях. Идея использования HTML-шаблонов состоит в том, чтобы повторять один и тот же блок разметки снова и снова в определенных местах, где это необходимо. Если кассета предоставляет эту функцию, вы должны использовать ее, а не обходной путь. Возможно, вам даже лучше создать кнопку с помощью jquery и добавить ее в нужные области. Затем вы создаете обработчик щелчка для динамической кнопки, чтобы он отображал модальный интерфейс jquery.

Вот некоторый псевдокод, чтобы дать вам больше о моей идее..

...

$("<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
});

Вот некоторая информация о методе appendTo:

документация appendTo()

Это всего лишь один из подходов, но вам трудно помочь с кассетой без примера кода.