Using Template7 in Index.html

1

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>
2

Such page must be loaded with router, like http://framework7.io/docs/view.html#initial-page-route

2 Likes
3

Sorry, something so simple and had not seen.
Thank you very much for the answer … Taking advantage of this topic, I have another problem …

I’m using the Messages API, but the messages I’ve sent can not be deleted.

I am using the function:

//instance
self.messages = app.messages.create({
el: page.$el.find(’.messages’),
autoLayout: false,
});

After sending multiple texts using the addMessage function I try to clear the dialog box, but not working …
Using method:

app.messages.destroy(’.messages’);
and
self.messages.destroy();

Not work for me…