0

我只是将我的第一个基于 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 脚本)。任何意见,将不胜感激。

谢谢

4

1 回答 1

1

您应该研究Durandal或其他一些 MVVM SPA 框架,它会使这一点更加清晰,因为所问的答案确实很长,因为您需要开始考虑 IOC、Requie.js 和 knockout.js.. ..

于 2013-05-07T19:53:19.563 回答