0

我只是把我的第一個基於HTML5的SPA應用程序放在一起。以下是我的聯繫人SPA的開始,基本上它只是一個簡單的列表 - >細節。我的問題是現在,我如何重構我的JavaScript到單獨的JS文件。目前全部在html頁面上。Javascript SPA ViewModel重構

@{ 
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腳本)。任何意見,將不勝感激。

感謝

回答

1

你應該看看Durandal或其他一些MVVM SPA framework,它將使這個更加清晰,因爲問的答案是很長的確實,因爲你需要開始思考國際奧委會,Requie。 js和knockout.js ....