最近一直在使用Framework7，雖然Framework7可以構建精美的iOS和Android應用，也提供了文件，但是使用的時候遇到很多問題在網上還是搜不到，感覺還是沒有很多人使用。在這裡寫一下Template7的helper的用法和我遇到的坑以其解決方法。

  首先在使用Framework7的時候我推薦大家使用Template7模板，比起自己用js拼串寫html來說，Template7更有效率且更易於維護。作為Framework7提供的模板方法，Template7和其他模板方法一樣也提供了helper來供大家在Template7表示式中使用js方法，下面正式開寫。

  先講一下我的使用場景，首先我的目的是要顯示時間，但是我的後臺傳過來的是long型別的時間型別，並且還有指定的顯示時間格式，所以我的helper寫法如下：

/**
 * 顯示[年月日時分秒]
 */
Template7.registerHelper('yyyyMMddHHmmss', function (value, options) {
    var date = new Date(value);
    return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
});

/**
 * 顯示[年月日時分]
 */
 

Template7.registerHelper('yyyyMMddHHmm', function (value, options) {
    var date = new Date(value);
    return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
});

/**
 * 顯示[年月]
 */
Template7.registerHelper('yyyyMM', function (value, options) {
    var
 
 date = new Date(value);
    return date.getFullYear() + "/" + (date.getMonth() + 1);
});

接下來是如何使用：

<span>{{yyyyMMddHHmmss createdDate}}</span>
<span>{{yyyyMMddHHmm createdDate}}</span>
<span>{{yyyyMM createdDate}}</span>

  接下來再講一個使用場景，我的html頁面要根據資料的狀態顯示不同的背景色，當然我的後臺傳過來的資料是int型別的，所以我需要將int型別轉換為對應的class名稱，helper寫法如下：

Template7.registerHelper('bgColor', function (status, options) {
    switch (status) {
        case 0:
            return 'status-0';
            break;
        case 1:
            return 'status-1';
            break;
        case 2:
            return 'status-2';
            break;
        case 3:
            return 'status-3';
            break;
        default:
            return 'status-x';
            break;
    }
});

css樣式程式碼：

.status-0 {
    background-color: #FCF8E3;
}

.status-1 {
    background-color: #D9EDF7;
}

.status-2 {
    background-color: #DFF0D8;
}

.status-3 {
    background-color: #F2DEDE;
}

.status-x {
    background-color: #FFFFFF;
}

接下來是呼叫方式：

<div class="card-header {{bgColor status}}">
......
</div>

  helper的基本用法如上，從上面的程式碼可以看出helper的註冊模式如：Template7.registerHelper(方法名, function (引數1,引數2,,,引數n,options) {...處理函式...}所示，呼叫方式如：{{方法名 引數1 引數2 ... 引數n}}所示，更詳細的用法可以參考：http://www.shouce.ren/api/view/a/11250。接下來是需要注意的地方。

• Template7.registerHelper中function中的引數是可以多個的，儘管最後一個引數options可能用不上（我目前沒有用到），但把它帶上，同時記得呼叫時你傳的引數順序要和你定義的一致。

• 一定要在Framework7中啟用Template7，在new Framework7時precompileTemplates: true即可，如：var myApp = new Framework7({...,precompileTemplates: true});

• 你使用時可能會發現有的地方使用helper不行或報錯，如：Uncaught Error: Template7: Missing helper: "xxx"，這時候將你的helper.js（我建議大家將helper集中放在一個js檔案中便於管理）先於var myApp = new Framework7({...,precompileTemplates: true});這段程式碼之前引用即可。（我當時遇到這個問題時發現如果是通過Framework7的路由load的頁面可以使用heper方法，但不是通過理由載入的頁面則使用報錯，大家可以參考一下。）

基本情況如上，以後有的話還會補充，未完待續……