typescript 可用于商店参考数据的简单代码，用于使用knockout.js处理Web应用程序中的列表。

Posted 2021-05-21

// module with some classes that can used in the references or another parts of the application
module ReferencesExtensions {
     export class ReferenceData<T> {
         public data: KnockoutObservableArray<T>;
         public apiPath: string;
         logger: Utils.Logger;

         constructor(apiPath: string) {
             this.apiPath = apiPath;
             this.data = ko.observableArray<T>([]);

             this.logger = new Utils.Logger('ReferenceData object');
         }

         loadData() {
             $.ajax({
                 type: 'GET',
                 url: this.apiPath,
                 success: (response) => {
                     var mappedData = $.map(response, (item) => {
                         var mapped = ko.mapping.fromJS(item);
                         return mapped;
                     });
                     this.data(mappedData);

                     this.logger.info("Data was successfully load!", "Information");
                 },
                 error: () => {
                     this.logger.error("Error occur when data loading from server!", "Error");
                 }
             });
         }

         add = (item) => {
             //console.log(item);
             //var obj = ko.toJSON(item);
             //console.log(obj);

             $.ajax({
                 type: 'POST',
                 url: this.apiPath,
                 contentType: "application/json;charset=utf-8",
                 data: ko.toJSON(item),
                 success: (response) => {
                     console.log(response);

                     // TODO: update logic how updating ID of the item after POST
                     // update record ID
                     item.id(response.id);
                     this.data.push(item);

                     console.log(item);

                     this.logger.info("Item successfully added!", "Information");
                 },
                 error: (response) => {
                     //console.log(response);

                     this.logger.error("Error occur on record inserting!", "Error");
                 }
             });
         }

         update = (item) => {
             //console.log(item.id());

             console.log(ko.toJSON(item));

             $.ajax({
                 type: "PUT",
                 url: this.apiPath + item.id(),
                 contentType: "application/json;charset=utf-8",
                 data: ko.toJSON(item),
                 success: (response) => {
                     //console.log(response);

                     this.logger.info("Item was successfully edited!", "Information");
                 },
                 error: (response) => {
                     //console.log(response);

                     this.logger.error("Error occur on record editing!", "Error");
                 }
             });
         }

         remove = (item) => {
             //console.log(item.id());

             $.ajax({
                 type: "DELETE",
                 url: this.apiPath + item.id(),
                 success: (response) => {
                     //console.log(response);
                     this.data.remove(item);

                     this.logger.info("Item was successfully added!", "Information");
                 },
                 error: (response) => {
                     //console.log(response);

                     this.logger.error("Error occur on record removing!", "Error");
                 }
             });
         }

         clearLocal() {
             this.data.removeAll();
         }
     }
 }