0

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

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

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

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

我最终做了什么：
基于 chrisvillanueva 的回答。我使用 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）但现在它已经足够好了......

4

1 回答 1

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() 文档

这只是一种方法，但很难在没有可用示例代码的情况下帮助您使用盒式磁带。

于 2012-12-05T03:43:11.960 回答