9

Javascript コードを別のファイルに配置して、懸念事項を分離しておくのが最善であると言われました。その考えには共感しますが、実用的ではありません。

それは私の経験不足かもしれないので、この質問です。

これは、別の JavaScript ファイルにコードを配置するよりも、コードをビューに配置する方が優れていることがわかった明確な例です。

私のビューでは、JQueryUI ダイアログを呼び出し、モデルの名前で動的にタイトルを設定する必要がありました。

$("#thumbs img").click(function () {
    var url = $(this).attr("src");
    $(".image-popup").attr("src", url);

    return $("#image-popup").dialog({
        modal: true,
        closeOnEscape: true,
        minHeight: 384,
        minWidth: 596,
        resizable: false,
        show: {
            effect: 'slide',
            duration: 500,
            direction: 'up'
        },
        hide: {
            effect: 'slide',
            duration: 250,
            direction: 'up'
        },
        title: '@Model.Product.Name'
    });
});

知らせ：

title: '@Model.Product.Name'

ご覧のとおり、View で Javascript を使用すると、強く型付けされたモデルにアクセスできます。これは、別の Javascript ファイルを使用する場合には当てはまりません。

私はこれを間違っていますか、私が見ていないものはありますか?

別のファイルを使用するとしたら、Javascript ファイル内からモデルのプロパティにアクセスできないため、どのように見えるでしょうか?

4

2 に答える 2

12

別の js ファイル:

<div id="thumbs">
    <img data-dialog-title="@Model.Product.Name" src="[whatever url]" />
</div?

$("#thumbs img").click(function () {
    var title = $(this).data('dialog-title');
    var url = $(this).attr("src");
    $(".image-popup").attr("src", url);

    return $("#image-popup").dialog({
        modal: true,
        closeOnEscape: true,
        minHeight: 384,
        minWidth: 596,
        resizable: false,
        show: {
            effect: 'slide',
            duration: 500,
            direction: 'up'
        },
        hide: {
            effect: 'slide',
            duration: 250,
            direction: 'up'
        },
        title: title
    });
});

HTML5 の data-* 属性を使用して、dom から目立たないようにモデル プロパティにアクセスします。上記の JavaScript は、外部ファイルとして問題なく動作します。

于 2012-04-05T22:31:54.587 に答える
0

前述の HTML5 データ属性を使用できない場合は、おそらくhttp://nuget.org/packages/RazorJSで問題が解決するようです。

于 2012-04-06T15:57:13.890 に答える