它是更好地使用嵌入的JavaScript或单独的.js文件中的MVC3看法？(Is it bette

有人告诉我，这是最好的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'

正如你可以看到我有机会获得强类型的模型，如果我在查看使用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
    });
});

通过DOM使用HTML5数据 - *属性悄悄地访问模型属性。上面的JavaScript将完全正常工作作为外部文件。