項目分享四：購物車頁面的更新

時間 2019-11-06

標籤項目分享購物車頁面更新简体版

原文原文鏈接

注：項目分享系統，都是基於我開源的一個電商前端項目，爲了幫助各位朋友理解那套代碼而寫。因此閱讀的時候，最好能和項目結合起。html

1、購物車的流程

在咱們這個項目裏面，使用 konckout js 來進行數據綁定的，對面的更新，基本上都是經過對 model 的更新來實現的。咱們以購物車做爲實例，隱聊如何對頁面進行更新。前端

購物車不但要把商品給顯示出來，並且還要顯示贈品，優惠的金額等等，這些數據都是在服務端運算出來的。因此購物車的數據，都是保存在服務端的，對購物車的操做，都須要和服務端進行通訊，這些操做包括：增長商品數據、移除商品，商品的選擇或者取消。服務端根據用戶修改的數據，把計算好的結果，返回給客戶端，而後客戶端再把這些數據更新到頁面。app

2、數據的提交與更新

在購物車 ShoppingCart.ts 文件所定義的 Model 裏，有這麼一個方法，這個方法是點擊購物車商品中的」+「按鈕時，因此調用的。函數

    increaseCount = (item) => {
        if (status == Status.updating)
            return;

        var count = item.Count();
        item.Count(new Number(count).valueOf() + 1);
    }

另外還定義了這麼一段代碼，這段代碼涉及到 knockout mapping，如完整理解這段代碼，還須要學習一下 knockout mapping。可是在這裏，咱們只須要 item.Count.subscribe 這個方法，當商品中數量發生了變化時，都會去調用 model.updateItem 方法。學習

 get map_conf(): any {
        var model = this;
        return {
            key: function (data) {
                return ko.utils.unwrapObservable(data.Id);
            },
            create: function (options) {
                var item = mapping.fromJS(options.data);
                item.Count.subscribe(function (value) {
                    var count = new Number(value).valueOf() || 1;
                    if (count != this.Count())
                        this.Count(count);

                    model.updateItem(this);
                }, item);

                return item;
            }
        }
    }

咱們如今再來看一下 updateItem 方法，須要說明的是 shoppingCart.updateItem 是一個調用服務端的方法。當更新完成後，經過 knockout mapping 的 fromJS 函數，對本地的 model 進行更新。this

    updateItem = (item) => {

        this.dialog.status(DialogStaus.update);

        shoppingCart.updateItem(item).done((items) => {
            mapping.fromJS(items, this.map_conf, this.shoppingCartItems);

            status = Status.done;
            this.dialog.status(DialogStaus.success);
            this.page.refreshUI();

        }).fail(() => {
            this.dialog.status(DialogStaus.fail);
        });
    }