在MVC3视图中使用嵌入式javascript或单独的.js文件会更好吗？

Question

我被告知最好将Javascript代码放在一个单独的文件中以保持关注点分离,虽然这个想法与我产生共鸣,但我觉得它并不实用.

这可能只是我的经验不足,因此这个问题.

这是一个明确的示例,我发现将代码放在View中比将其放在单独的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文件中访问模型属性？

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将作为外部文件完美地工作.