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