在 MVC3 視圖中使用嵌入式 javascript 還是單獨的 .js 文件更好？

Question

有人告訴我，最好將 Javascript 代碼放在一個單獨的文件中，以分離關注點，雖然這個想法引起了我的共鳴，但我覺得它不實用。

那可能只是我的經驗不足，因此這個問題。

這是一個清晰的示例，我發現將代碼放在視圖中比將它放在單獨的 javascript 文件中要好。

在我的視圖中，我需要調用一個 JQueryUI 對話框，並使用我的 model 的名稱動態設置標題。

$("#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'

如您所見，如果我在我的視圖中使用 Javascript，我就可以訪問強類型 model。 如果我使用單獨的 Javascript 文件，則情況並非如此。

我做錯了嗎，有什么我沒有看到的嗎？

如果我要使用一個單獨的文件，當我無法從 Javascript 文件中訪問 Model 屬性時，會是什么樣子？

Answer 1

單獨的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 不顯眼地訪問 model 屬性。 上面的 javascript 作為外部文件可以正常工作。

Answer 2

如果您不能使用上述 HTML5 數據屬性，那么也許http://nuget.org/packages/RazorJS可以解決問題，似乎可以解決您的問題。