c# - 在 MVC3 View 中使用嵌入式 javascript 还是单独的 .js 文件更好？

Question

有人告诉我，最好将 Javascript 代码放在一个单独的文件中以分离关注点，虽然这个想法引起了我的共鸣，但我认为它不切实际。

这可能只是我经验不足，所以才有这个问题。

这是一个清晰的示例，我发现将代码放在 View 中比将它放在单独的 javascript 文件中更好。

在我的 View 中，我需要调用一个 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 文件中访问模型属性时，会是什么样子？

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 以不显眼的方式访问模型属性。上面的 javascript 作为外部文件可以很好地工作。