Access a variable outside the foreach loop

1

Hi everyone,
I’m printing a list of card using a foreach loop in Framwork7.
for one card I need to show a value that is stored in an another variable. how can I do that,

apps: {
applications: [app1,app2,app3],
price: [price1,price2,price3,price4],}

inside one of my page

{{#each $root.apps.applications}}

{{title}}

price : {{$root.apps.price[3]}}

{{/each}}

but that’s not working.

I’m waiting for a help.
Thank you,

2

The “$root” doesn’t point to scoped context.
You‘d better pass val to scoped context then render it.

data:(){return {price:array}}

1 Like
3

In Template7 you can access one level up (parent) context with ../ like {{../price.3}}

3 Likes
4

Thank you @hongfu
I tried but I couldn’t be success.

5

Thank you.
I’m using Framwork7 V 2.0.1
Is it possible to do this, could you please give me a guide or any reference for it.
Thank you !

6 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#2196f3">
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
<title>Framework7</title>
<link rel="stylesheet" href="http://framework7.io/packages/core/css/framework7.min.css">
</head>
<body>
<div id="app">
<div class="statusbar"></div>
<div class="view view-main">
    <div class="page" data-name="test">
        <a href="/t/">test</a>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.0.1/js/framework7.js"></script>
<script>
    var remoteVar = {apps: {
                        applications: ['app1','app2','app3'],
                        price: ['price1','price2','price3','price4'],
                    }};
    var app = new Framework7({
    root: '#app',
    theme: 'md',
    routes: [{
        path: '/t/',
        // Component Object
        component: {
            template: `
                <div class="page">
                <div class="page-content">
                    <div class="list simple-list">
                    <ul>
                    {{#apps}}
                        {{#applications}}
                        <li>
                            <h1>{{this}}</h1>
                            <h2>{{../price.1}}</h2>
                        </li>
                        {{/applications}}
                        {{#price}}
                        <li>
                            <h3>{{this}}</h3>
                        </li>
                        {{/price}}
                    {{/apps}}
                    </ul>
                    </div>
                </div>
                </div>
            `,
            data: function () {
                 /*The data is processed logically here*/
                return remoteVar;
            }
        }
    }],
    on: {
        pageInit: function(e,page){

        },
    }
    });

    var MV = app.views.create('.view-main');
</script>
</body>
</html>
1 Like
7

{{#apps}} is works? may be {{#each apps}} ?

1 Like
8

Hi… its working {{…/VariableName}} But how to use it with {{js “…/VariableName -this.price”}} Its actually not working with js and we can’t do mathematics actions without it… Please help.

9

…/VariableName => this.@root

1 Like
10

Worked like Charm… Thank you !!!