0

最新の編集：chrisvillanuevaの回答に基づいて、質問の最後に解決策を追加しました

ボタンを作成するヘルパーメソッドがあります。このボタンをクリックすると、ダイアログが表示され（jQuery UIダイアログ）、ボタンがページに複数回表示されます。
ヘルパーメソッドには、JavaScriptコードや、ボタンがクリックされたときに表示されるダイアログのHTMLなど、一度だけレンダリングしたい部分が含まれています。（基本的に、ボタン自体のHTMLを複数回レンダリングする必要がある唯一のもの）

カセット（http://getcassette.net/）を使用しているときにJavaScriptがロードされることを確認するために、ダイアログのHTMLの適切なソリューションが見つからないため、カセットに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 -->

どんなアイデアでもありがたいです。カセット付きのものか、MVC3に組み込まれているものが望ましいです（ライブラリを追加したくない）

編集：スクリプトブロック内にあるhtmlでjQuery UIのダイアログを使用する簡単な方法もあるかもしれません（私はそれで遊んで検索しようとしましたが、コンテンツを別の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の答えに基づいています。このHTMLをレンダリングするCassetteのHtmlTemplatesを使用します。 

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

これをjQueryUIのダイアログ（http://api.jqueryui.com/dialog/）で使用するには、次のコードを使用します。$($("#dialogHtmlTemplate").html()).dialog() これにより、ブラウザーでhtmlがレンダリングされ、その周りにダイアログが作成されます。 mustache.jsまたはjQueryテンプレート。上記の状況（テンプレートを繰り返すだけではありません）には必要ありません。

パフォーマンスの面では、これが最善の解決策ではないと思います（毎回inner-htmlをコピーします）が、今のところは十分です...

4

1 に答える 1

1

大規模なWebアプリケーションでmustache.jsとangularJSでhtmlテンプレート/部分を使用しました。HTMLテンプレートのアイデアは、必要な特定の場所でマークアップの1つのブロックを何度も繰り返すことです。カセットがこの機能を提供する場合は、回避策を使用するのではなく、それを使用する必要があります。jqueryを使用してボタンを作成し、必要な領域に追加する方がよい場合もあります。次に、動的ボタンのクリックハンドラーを作成して、jqueryuiモーダルをレンダリングします。

これが私の考えについてもっとあなたに与えるためのいくつかの擬似コードです。

...

$("<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（）ドキュメント

これは1つのアプローチにすぎませんが、サンプルコードが利用できないカセットを使用するのは困難です。

于 2012-12-05T03:43:11.960 に答える