File Structure
- js
- app.js
- cordova-app.js
- route.js
- pages
- order
- orders.f7.html
- order
- static
- image-one.png
- image-two.png
In
app.js
var app = new Framework7({
//...
data: function () {
return {
bagCementImage: "./static/image-one.png",
looseCementImage: "./static/image-two.png",
};
},
})
In
pages > order > orders.f7.html
{{#each items}}
<li key="{{this.OrderId}}">
<a
href="#"
class="item-link item-content"
>
<div class="item-media">
<div class="" style="width: 2%; background: #f95914"></div>
{{#js_if "this.ProductTypeName =='Teste'"}}
<img
loading="lazy"
src="{{../$root.looseCementImage}}"
alt="form-asset"
/>
{{else}}
<img
loading="lazy"
src="{{../$root.bagCementImage}}"
alt="bag-cement"
/>
{{/js_if}}
</div>
<div class="item-inner">
<div class="row">
<div class="col-66">Lorem ipsum</div>
<div class="col-33">Lorem ipsum</div>
</div>
<div class="row">
<div class="col-66">Lorem ipsum</div>
<div
class="col-33 text-align-center"
style="font-size: 1.8em; color: #f56010"
>
250
</div>
</div>
</div>
</a>
</li>
{{/each}}
Uncaught TypeError: Cannot read property ‘bagCementImage’ of undefined
also tried the following but could not resolved