Question

Framework7版本：1.6.0
平台与目标：混合移动应用/ Android。

我试图理解如何在index.page处理模板，但我失败了。

有我的代码

index.html是

<!DOCTYPE html>
<html>
<head>
  ...
</head>
<body>
<div class="views">
    <div class="view view-main">
        <div data-page="index" class="page">
            <div class="page-content">
                <p>Hello, my name is {{name}} and i am {{age}} years old</p>
            </div>
        </div>
    </div>
</div>
<!-- Path to Framework7 Library JS-->
...
<!-- Path to your app js-->
...
</body>
</html>

我的app.js是

var myApp = new Framework7({
    template7Pages: true,
    precompileTemplates: true,
    template7Data: {
        index: {
            name: 'John Doe',
            age: 38,
            company: 'Apple',
            position: 'Developer'
        }
    }
});

var $$ = Dom7;
var mainView = myApp.addView('.view-main', {
    // Because we use fixed-through navbar we can enable dynamic navbar
    dynamicNavbar: true
});

我有

Hello, my name is {{name}} and i am {{age}} years old

我发现（我不记得在哪里）tempise没有在index.html处理，以下解决方案解决了这个问题。

将模板的内容移至外部文件
在页面加载时加载要查看的外部文件的内容

我的代码更改为：

<!DOCTYPE html>
<html>
<head>
  ...
</head>
<body>
<div class="views">
    <div class="view view-main">
        <div class="pages navbar-fixed">

        </div>
    </div>
</div>
<!-- Path to Framework7 Library JS-->
...
<!-- Path to your app js-->
...
</body>
</html>

items.html

<div data-page="items" class="page">
    <div class="page-content">
        <p>Hello, my name is {{name}} and i am {{age}} years old</p>
    </div>
</div>

我的app.js

var myApp = new Framework7({
    template7Pages: true,
    precompileTemplates: true,
    template7Data: {
        items: {
            name: 'John Doe',
            age: 38,
            company: 'Apple',
            position: 'Developer'
        }
    }
});

var $$ = Dom7;

var mainView = myApp.addView('.view-main', {
    // Because we use fixed-through navbar we can enable dynamic navbar
    dynamicNavbar: true
});

mainView.router.loadPage('items.html');

我有

Hello, my name is and i am years old

如何将模板包含到index.html中？

在index.html处理模板

0 个答案: