Javascript SPA ViewModel Refactoring

我刚刚组装了我的第一个基于html5的SPA应用程序。以下是我的联系人SPA的开始，基本上只是一个简单的列表->详细信息。我现在的问题是，如何将javascript重构为单独的JS文件。目前都在html页面上。

@{
ViewBag.Title = "Contacts";
Layout = "~/Views/Shared/SiteLayout.cshtml";
}
@section HeaderContent
{
<script type="text/javascript" src="@Url.Content("~/assets/scripts/sammy.js")"></script>        
}
@section HeaderText
{
  Contacts
}
@section ButtonBar
{   
<button id="btnDetails"><img alt="New" src='@Url.Content("~/assets/images/btnAdd.png")'/><span>DETAILS</span></button>    
<button id="btnNew"><img alt="New" src='@Url.Content("~/assets/images/btnAdd.png")'/><span>NEW</span></button>        
<button id="btnRange"><img alt="New" src='@Url.Content("~/assets/images/btnAdd.png")'/><span>RANGE</span></button>
<button id="btnDelete"><img alt="New" src='@Url.Content("~/assets/images/btnAdd.png")'/> <span>DELETE</span> </button>
<button id="btnRefresh"><img alt="New" src='@Url.Content("~/assets/images/btnAdd.png")'/><span>REFRESH</span></button>        
}
<div id="form-container">
<div id="grid" style="height:100%;width:100%"></div>    
<div id="ContactsDetails" >
   <ul>
        <li><label>ID</label> <span data-bind="text:selectedContact.ContactID, events: { change: change }"></span></li>
        <li><label>Name</label> <input type="text" class="k-textbox" data-bind="value: selectedContact.FirstName, events: { change: change }" /></li>
        <li><label>UnitPrice</label> <input type="text" class="k-textbox" data-bind="value: selectedContact.LastName, events: { change: change }" /></li>
    </ul>
    <button data-bind="click: remove">Delete Contact</button>
    <button data-bind="click: goToContactsListing">Back to Listing</button>
     <button data-bind="click: save, enabled: hasChanges">Save Changes</button>
</div>

</div>
<div id="urlLink" data-url='@Url.Action("DataAPI", "API")'/>
<script>
 var viewModel;
 $(document).ready(function () {
      viewModel = kendo.observable({
         contactsSource: new kendo.data.DataSource({
             pageSize: 25,
             transport: {
                 read: {
                     url: '@Html.Raw(@Url.Action("DataAPI", "API", new {tenantId = 1, datatype = "Contacts_Listing", actionname="ActiveOnly"}))',
                     dataType: "json"
                 },
                 update: {
                     url: '@Html.Raw(@Url.Action("DataAPI/SaveChanges", "API", new {tenantId = 1, actionName = "Contacts_Listing"}))',
                     dataType: "json",
                     type: "POST",
                     contentType: "application/json; charset=utf-8"
                 },
                 destroy: {
                     url: '@Url.Action("DataAPI", "DestroyAPI")',
                     dataType: "json"
                 },
                 parameterMap: function (options, operation) {
                     if (operation !== "read" && options.models) {
                         return JSON.stringify(options.models);
                     }
                     return options;
                 }
             },
             batch: true,
             schema: {
                 model: {
                     id: "ContactID"
                 }
             }
         }),
         selectedContact: null,
         hasChanges: false,
         save: function () {
             this.contactsSource.sync();
             this.set("hasChanges", false);
         },
         remove: function () {
             if (confirm("Are you sure you want to delete this contact?")) {
                 this.contactsSource.remove(this.selectedContact);
                 //this.set("selectedContact", this.contactsSource.view()[0]);
                 this.change();
             }
         },
         showForm: function () {
             return this.get("selectedContact") !== null;
         },
         change: function () {
             this.set("hasChanges", true);
         },
         goToContactsListing: function () { location.hash = '' },
         goToContactsDetails: function () { location.hash = '/' + this.get("selectedContact").ContactID }
     });
      kendo.bind($("#form-container"), viewModel);
     $("#grid").kendoGrid({
         dataSource: viewModel.contactsSource,
         height: $(document).height() - 92,
         groupable: true,
         sortable: true,
         filterable: true,
         pageable: true,
         selectable: "multiple",
         scrollable: {
             virtual: true
         },
         columns: [{
             field: "FirstName",
             width: 90,
             title: "First Name"
         }, {
             field: "LastName",
             width: 90,
             title: "Last Name"
         }, {
             field: "DepartmentName",
             width: 90,
             title: "Department"
         }
         ]
     });
     $("#btnDetails").click(DetailsClicked);
     $("#btnNew").click(NewClicked);
     $("#btnRange").click(RangeClicked);
     $("#btnDelete").click(DeleteClicked);
     $("#btnRefresh").click(RefreshClicked);
     SetupSammy();

 });
 function SetupSammy() {
     Sammy(function () {
         this.get('', function () {
             viewModel.set("selectedContact", null);
             showContactListing();
         });
         this.get('#/:contactId', function () {
             showContactDetails();                
         });
     }).run();
 }
 function DetailsClicked() {
     var grid = $("#grid").data("kendoGrid");                  
     if (grid.select().length != 0) {
         viewModel.set("selectedContact", $("#grid").data("kendoGrid").dataItem(grid.select()[0]));
         viewModel.goToContactsDetails();
     }     
 }
 function NewClicked() {
     alert('NEW CLICKED');
 }
 function RangeClicked() {
     alert('RANGES CLICKED');
 }
 function DeleteClicked() {
     viewModel.goToContactsListing();         
 }
 function RefreshClicked() {         
     viewModel.contactsSource.read();
 }
 function resizeObjects() {
     var gridElement = $("#grid");
     var dataArea = gridElement.find(".k-grid-content");
     var newGridHeight = $(document).height() - 92;
     var newDataAreaHeight = newGridHeight - 65;
     dataArea.height(newDataAreaHeight);
     gridElement.height(newGridHeight);
     $("#grid").data("kendoGrid").refresh();
 }
 $(window).resize(function () {
     resizeObjects();
 });
 var isShowingListing = true;
 function showContactDetails() {
    $("#grid").hide();
    $("#ContactsDetails").show();        
 }
 function showContactListing() {
    $("#ContactsDetails").hide();
    $("#grid").show();      
 }
</script>

这并不是我不知道如何将其与其他JS文件分离的问题。JS文件应该是什么，目前我正在查看Contacts_ViewModel（用于保存一般的JS脚本）和Contacts_Details_ViewModel，用于保存联系人详细信息JS脚本）。如有任何建议，我们将不胜感激。

感谢