如何使辅助方法只返回一次 HTML 的一部分？

Question

最新编辑：我在问题末尾添加了我的解决方案，基于 chrisvillanueva 的回答

我有一个创建按钮的辅助方法，当单击此按钮时会出现一个对话框（jQuery UI 对话框），该按钮在页面上出现多次。
辅助方法包含我只想呈现一次的部分，例如 javascript 代码和单击按钮时出现的对话框的 HTML。 （基本上唯一应该多次渲染按钮本身的 HTML 的东西）

为了确保仅在我使用 Cassette (http://getcassette.net/) 时加载 javascript，但我找不到对话框 HTML 的好解决方案，我看到 Cassette 有 HTML 模板，但它是相当复杂，因为 HTML 是在脚本标签中呈现的。

目前我的解决方法是使用 Cassette 的 HTML 模板，并在以 开头和结尾的模板中，这样它消除了包装块并且 HTML 由浏览器呈现 - 我知道，这很糟糕......：/ 这是我目前与 Cassette 的 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 -->

希望有任何想法，最好是带有 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() 的按钮上设置一个点击事件

我最终做了什么：
基于克里斯维拉纽瓦的回答。 我使用 Cassette 的 HtmlTemplates 来呈现这个 HTML：

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

为了将它与 jQuery UI 的对话框 (http://api.jqueryui.com/dialog/) 一起使用，我使用以下代码：$($("#dialogHtmlTemplate").html()).dialog() 这会通过浏览器呈现 html 并在其周围创建对话框，它无需添加更多库（如 mustache.js 或 jQuery 模板）即可工作，对于上述情况（没有模板只是重复）是不需要的。

就性能而言，我认为这不是最好的解决方案（它每次都会复制内部 html），但现在它已经足够好了......

Answer 1

我在大型 Web 应用程序中使用了带有 mustache.js 和 angularJS 的 html 模板/部分。 html 模板的想法是在需要的特定位置一遍又一遍地重复一个标记块。如果盒式磁带提供此功能，您应该使用它而不是使用解决方法。使用 jquery 创建按钮并将其附加到需要的区域可能会更好。然后为动态按钮创建一个单击处理程序，以便它呈现一个 jquery ui 模式。

这里有一些伪代码可以让你更多地了解我的想法..

...

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

这只是一种方法，但如果没有可用的示例代码，很难帮助您处理卡带。