Framework7——Template7之Helper的用法及注意点

  最近一直在使用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方法，但不是通过理由加载的页面则使用报错，大家可以参考一下。）

基本情况如上，以后有的话还会补充，未完待续……

附上Framework7文档地址：http://docs.framework7.cn/Index