Ist es besser, eingebettetes JavaScript oder eine separate .js-Datei in einer MVC3-Ansicht zu verwenden?

Question

Mir wurde gesagt, dass es am besten ist, Javascript-Code in einer separaten Datei zu platzieren, um Bedenken getrennt zu halten, und während die Idee mit mir schwingt, finde ich es nicht praktisch.

Das kann nur meine Unerfahrenheit sein, daher diese Frage.

Hier ist ein klares Beispiel, wo ich fand, dass die Platzierung des Codes in der Ansicht besser war als das Platzieren in einer separaten Javascript-Datei.

In meiner Ansicht musste ich ein JQueryUI-Dialogfeld aufrufen und den Titel dynamisch mit dem Namen meines Modells festlegen.

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

Hinweis:

title: '@Model.Product.Name' 

Wie Sie sehen, ich Zugang auf das stark typisierte Modell, wenn ich Javascript in meiner Ansicht verwenden. Dies ist nicht der Fall, wenn ich eine separate Javascript-Datei verwende.

Mache ich das falsch, gibt es etwas, das ich nicht sehe?

Wenn ich eine separate Datei verwenden würde, wie sieht es aus, da ich in der Javascript-Datei nicht auf die Modelleigenschaften zugreifen kann?

Answer 1

Separate js-Datei:

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

Zugriff auf die Modell-Eigenschaften unaufdringlich durch den dom mit HTML5 Daten- * Attributen. Das obige Javascript funktioniert einwandfrei als externe Datei.

Answer 2

Wenn Sie die oben genannten HTML5 Datenattribute nicht verwenden können, dann wird vielleicht http://nuget.org/packages/RazorJS den Trick tun, scheint es könnte Ihr Problem lösen.