Cordova Framework7 模板子页面 javascript 不起作用

Question

我在 Framework7 模板中有一个 index.html 页面，它就像母版页和子页面，例如 contact.html ;

<div class="pages">
  <div data-page="contact" class="page no-toolbar no-navbar">
    <div class="page-content">

    <div class="navbarpages navbarpagesbg">
                            <div class="navbar_left">
                                <div class="logo_text"><a href="index.html">BLIX</a></div>
                            </div>
                <div class="navbar_right navbar_right_menu">
                <a href="#" data-panel="left" class="open-panel"><img src="images/icons/white/menu.png" alt="" title="" /></a>
                </div>          
                <div class="navbar_right">
                <a href="#" data-panel="right" class="open-panel"><img src="images/icons/white/user.png" alt="" title="" /></a>
                </div>
                <div class="navbar_right">
                <a href="cart.html" data-view=".view-main"><img src="images/icons/white/cart.png" alt="" title="" /><span>3</span></a>
                </div>          
    </div>

     <div id="pages_maincontent">

      <h2 class="page_title">CONTACT</h2>

     <div class="page_single layout_fullwidth_padding">   

            <h2 id="Note"></h2>
            <div class="contactform">
            <form class="" id="ContactForm" method="post" action="">
            <label>Name:</label>
            <input type="text" name="ContactName" id="ContactName" value="" class="form_input required" />
            <label>Email:</label>
            <input type="text" name="ContactEmail" id="ContactEmail" value="" class="form_input required email" />
            <label>Message:</label>
            <textarea name="ContactComment" id="ContactComment" class="form_textarea textarea required" rows="" cols=""></textarea>
            <input type="submit" name="submit" class="form_submit" id="submit" value="Send" />
            <input class="" type="hidden" name="to"  value="youremail@yourwebsite.com" />
            <input class="" type="hidden" name="subject" value="Contacf form message" />
            <label id="loader" style="display:none;"><img src="images/loader.gif" alt="Loading..." id="LoadingGraphic" /></label>
            </form>
            </div>

      <h3>Our Location</h3>

      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193578.74109041138!2d-73.97968099999997!3d40.70331274999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York+NYC%2C+New+York%2C+Statele+Unite+ale+Americii!5e0!3m2!1sro!2s!4v1425027721891" width="100%" height="200" frameborder="0" style="border:0"></iframe> 

      <blockquote>
      Adress: New York 23066 / Pacific Street / Brooklyn <br />
      Email: email@yourwebsite.com <br />
      Mobile: +900 456 567 77
      </blockquote> 

      <a href="tel:+900 456 567 77" class="button_full btyellow external">Call Us Now!</a>   

      <div class="clear"></div>
      </div>

      </div>
    </div>
  </div>
</div>

当我添加底部页面时 javascript ;

<script type="text/javascript">
    alert('Hello World!');
</script>

它没有触发，也没有给出任何错误。当我将它添加到 index.html 页面或我的-app.js 文件的底部时，它起作用了。但我需要在子页面中使用一些特定的 javascript。我怎样才能做到这一点？谢谢

Answer 1

页面事件：https://framework7.io/docs/page.html#page-events

在您的索引页上，包含一个 whatevername.js 文件并将特定于页面的逻辑放入其中。（路由和组件的替代方法）

在那个 js 文件中，通过它的数据名称和您希望它在运行处的页面事件来定位页面。

示例：在我的 html 主页页面上 <div class="page" data-name="home"> 页面中包含的任何正常 html。

在我的 js 文件中，我会运行 js 通过使用这个

$$(document).on('page:init', '.page[data-name="home"]', function (e) {
    //whatever code here
    alert('Hello World!');
})

所以在主页上，在它的初始化事件上，它会触发javascript 有alert hello world。

从模板开始可以更轻松地了解不同部分在 F7 中的工作方式。 https://framework7.io/templates/ 单一视图是一个很好的起点。

Cordova Framework7 模板子页面 javascript 不起作用

Cordova Framework7 template sub pages javascript doesn't works

javascript

html

cordova

html-framework-7