專案分享三：頁面之間的傳值

麥舒發表於2015-12-16

一、回撥函式的使用

我們首先來看一下，頁面間傳值的一個經典例子，列表頁與明細頁之間的傳值，如下面二張圖所圖。在列表頁點選評價曬單，進入評價曬單頁面，當使用者在該頁面完成操作後，列表頁對應的選項，相應地改為“已評價"。那麼這個是怎麼實現的呢？在這個案例裡面，使用的是 回撥函式 ，我們來看一下相關的程式碼。

下面這段程式碼，是列表頁的程式碼，當使用者點選”評價曬單“按鈕時，開啟評價曬單詳細頁。關鍵點在於 evaluatePage['submited'] 這個回撥函式。

 evaluate = (item) => {
        var evaluatePage = app.redirect('Shopping_ProductEvaluate', { orderDetailId: item.OrderDetailId, productImageUrl: item.ImageUrl });
        evaluatePage['submited'] = () => {
            item.Status('Evaluated');
        }
    }

 

下面這段程式碼，是明細頁中的程式碼，當使用者發表完評價，呼叫回函式。

submit = () => {
        var imageDatas = this.imageDatas().join(site.config.imageDataSpliter);
        var imageThumbs = this.imageThumbs().join(site.config.imageDataSpliter);
        var orderDetailId = this.orderDetailId();
        return account.evaluateProduct(orderDetailId, this.score(), this.evaluation(), this.anonymous(), imageDatas, imageThumbs)
            .done((data) => {
                if ((<any>this.page).submited)        //這裡就是呼叫列表頁設定的回撥函式。
                    (<any>this.page).submited(data);

                app.back();
            });

    }

二、回撥函式還全域性變數？

回想我們在上一篇文章《專案分享二：APP 小紅點中數字的處理》所說的，用的是全域性變數，那麼什麼時候應該用回撥函式，而什麼時候又該用全域性變數呢？

回撥函式：如果值只在兩個頁面之間發生關係，使用回撥函式。

全域性變數：如果值在多個頁面中用到，頁面傳遞的路徑是多層的，即 A頁面 -> B頁面 -> C頁面 -> D 頁面，然後在 D頁面修改。並且，還有可能在多個頁面中修改。這時候就要使用全域性變數了。

例如：購物車中的商品數量，它在底部的工具欄，和產品頁面都有用到。

 

三、列表頁的重新整理

從明細頁返回到列表頁，是不是還要把頁面再重新整理一次呢？如果你這麼想，那就是傳 WEB 頁面的思考方式。這是一個 WEB APP，從列表頁到明細頁，其實列表頁並沒有關閉，只是隱藏而已已。所謂的返回到列表，是重新把頁面顯示出來。

把頁面重新顯示，資料總不能是舊的吧。但是，重新從服務端再獲取一次，肯定不是個好辦法。所以就了上面我們說的方案了。要理解這篇文章，還是要有點 WEB APP 相關的知識。

 

整個專案原始碼已託管在 GitHub 上，https://github.com/ansiboy/ChiTuStore，謝謝閱讀。

 

專案分享二：APP 小紅點中數字的處理

專案分享一：在專案中使用 IScroll 所碰到的那些坑

 

相關文章