指引网

当前位置: 主页 > 网页制作 > HTML >

html5中global全局数据、root根数据的获取

来源:网络 作者:佚名 点击: 时间:2017-07-06 20:59
[摘要]  下面我们来看一篇关于global全局数据、root根数据的获取的简单实现方法,希望这篇文章能够帮助到各位朋友

1,全局数据(Global Context)
我们可以定义一个全局的上下文数据,这样在任意的上下文中都可以访问到它。

(1)全局数据定义

Template7.global = {
    os: 'iOS',
    browser: 'Chrome',
    username: 'johndoe',
    email: 'john@doe.com'
};

(2)通过 {{@global}} 标签可以访问全局数据

<p>Hello, {{@global.username}}. Your email is {{@global.email}}</p>

2,上下文的根数据(Root Context)

有时在我们的模板中,可能需要访问最初上下文的根数据。这时使用 {{@root}} 变量即可。
(1)假设上下文数据如下:

{
    persons: [
        {
            name: 'John',
            hobby: ['Cars', 'Food']
        },
        {
            name: 'Kyle',
            hobby: ['Travel', 'Puzzles']
        },
 
    ],
    showHobby: true

(2)比如在模板页中的 each 循环中,我们可以通过 {{@root}} 变量获取上下文数据的根。

{{#each persons}}
    <h2>{{name}}</h2>
    <h3>Hobby:</h3>
    {{#if @root.showHobby}}
        <ul>
            {{#each hobby}}
                <li>{{this}}</li>
            {{/each}}
        </ul>
    {{/if}}
{{/each}}

------分隔线----------------------------