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

按钮上设置点击事件

我最终做了什么：
根据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）但是现在它已经足够了......

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

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

如何使一个帮助器方法只返回一部分HTML？

1 个答案: