How I am can using the Template7 in Views inside Index.html???
I’ve tried doing it this way but it does not work …:
<!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="img-src 'self' data: *; default-src *; font-src *; style-src * 'unsafe-inline' http://fonts.googleapis.com; script-src * 'unsafe-inline' 'unsafe-eval'">
<title>ChatBot</title>
<link rel="stylesheet" href="css/framework7.md.min.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div id="app">
<div class="statusbar page-main"></div>
<div class="view view-main view-init ios-edges" data-url="/">
<div class="page page-main">
<template>
<div class="page">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">Messsages</div>
</div>
</div>
<div class="toolbar messagebar" @messagebar:attachmentdelete="deleteAttachment">
<div class="toolbar-inner">
<a class="link icon-only" @click="sheetToggle">
<i class="icon f7-icons ios-only">camera_fill</i>
<i class="icon material-icons md-only">camera_alt</i>
</a>
<div class="messagebar-area">
<textarea class="resizable" placeholder="Message"></textarea>
</div>
<a class="link icon-only demo-send-message-link" @click="sendMessage">
<i class="icon f7-icons ios-only">arrow_up_fill</i>
<i class="icon material-icons md-only">send</i>
</a>
</div>
<div class="messagebar-sheet">
{{#each images}}
<label class="checkbox messagebar-sheet-image" style="background-image:url({{this}})" @change="handleAttachment">
<input type="checkbox">
<i class="icon icon-checkbox"></i>
</label>
{{/each}}
</div>
</div>
<div class="page-content messages-content">
<div class="messages">
<div class="messages-title"><b>Sunday, Feb 9,</b> 12:58</div>
<div class="message message-sent">
<div class="message-content">
<div class="message-bubble">
<div class="message-text">Hi, Kate</div>
</div>
</div>
</div>
<div class="message message-sent">
<div class="message-content">
<div class="message-bubble">
<div class="message-text">How are you?</div>
</div>
</div>
</div>
<div class="message message-received">
<div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/9)"></div>
<div class="message-content">
<div class="message-name">Kate</div>
<div class="message-bubble">
<div class="message-text">Hi, I am good!</div>
</div>
</div>
</div>
<div class="message message-received">
<div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/7)"></div>
<div class="message-content">
<div class="message-name">Blue Ninja</div>
<div class="message-bubble">
<div class="message-text">Hi there, I am also fine, thanks! And how are you?</div>
</div>
</div>
</div>
<div class="message message-sent">
<div class="message-content">
<div class="message-bubble">
<div class="message-text">Hey, Blue Ninja! Glad to see you ;)</div>
</div>
</div>
</div>
<div class="message message-sent">
<div class="message-content">
<div class="message-bubble">
<div class="message-text">Hey, look, cutest kitten ever!</div>
</div>
</div>
</div>
<div class="message message-sent">
<div class="message-content">
<div class="message-bubble">
<div class="message-image">
<img src="http://lorempixel.com/200/260/cats/4/" style="width:200px; height: 260px">
</div>
</div>
</div>
</div>
<div class="message message-received">
<div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/9)"></div>
<div class="message-content">
<div class="message-name">Kate</div>
<div class="message-bubble">
<div class="message-text">Nice!</div>
</div>
</div>
</div>
<div class="message message-received">
<div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/9)"></div>
<div class="message-content">
<div class="message-name">Kate</div>
<div class="message-bubble">
<div class="message-text">Like it very much!</div>
</div>
</div>
</div>
<div class="message message-received">
<div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/7)"></div>
<div class="message-content">
<div class="message-name">Blue Ninja</div>
<div class="message-bubble">
<div class="message-text">Awesome!</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
<script src="cordova.js"></script>
<script src="js/framework7.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/routes.js"></script>
<script src="js/app.js"></script>
<script src="js/MapGeo.js"></script>
<script src="js/Helper.js"></script>
<script src="js/Index.js"></script>
</body>
</html>