¿Es mejor utilizar JavaScript incorporado o un archivo .js por separado en una vista de MVC3?

Question

Me han dicho que es mejor colocar el código de Javascript en un archivo separado para mantener las preocupaciones separadas, y aunque la idea resuena en mí, no me parece práctico.

Esa puede ser solo mi inexperiencia, de ahí esta pregunta.

Aquí hay un ejemplo claro donde encontré que colocar el código en la Vista era mejor que colocarlo en un archivo javascript separado.

En mi vista, necesitaba invocar un cuadro de diálogo JQueryUI, y establecer el título dinámicamente con el nombre de mi modelo.

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

Aviso:

title: '@Model.Product.Name' 

Como se puede ver que tengo acceso al modelo inflexible si uso Javascript en mi opinión. Este no es el caso si utilizo un archivo Javascript por separado.

¿Estoy haciendo esto mal, hay algo que no estoy viendo?

Si tuviera que usar un archivo separado, ¿qué aspecto tendría si no pudiera acceder a las propiedades del Modelo desde el archivo Javascript?

Answer 1

js separado:

<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 
    }); 
}); 

Acceso a los del modelo discretamente por el DOM utilizando HTML5 Data- atributos *. El javascript anterior funcionará perfectamente bien como un archivo externo.

Answer 2

Si no puede utilizar los atributos de datos HTML5 mencionados anteriormente, entonces quizás http://nuget.org/packages/RazorJS hará el truco, parece que podría resolver su problema.