如何在 Framework7 中使用 JS？答案

【问题标题】：How to use JS in Framework7?如何在 Framework7 中使用 JS？
【发布时间】：2016-05-04 13:08:52
【问题描述】：

我用framework7 创建了一个应用程序。现在我尝试在我的page-content 中执行javascript，但它没有执行。

<div class="pages">
<div class="page  close-panel" data-page="item">
    <div class="page-content">
        <div class="content-block-title">Title</div>
        <script type="text/javascript">
          alert("testoutput"); // no alert
          console.log("TEST"); // no log
        </script>
    </div>
</div>

如何运行这段 javascript 代码？

更新

该页面是从另一个 HTML 页面加载的。

【问题讨论】：

标签： javascript html html-framework-7

【解决方案1】：

使用回调（onPageInit）执行代码

【讨论】：

【解决方案2】：

在此之前我从未听说过 Framework7，但是在查看了文档之后，我不相信您将能够以这种方式使用 Javascript。

对于 JS 事件，您必须在 Framework7 构造函数中限定事件范围：

var myApp = new Framework7();

var $$ = Dom7;

$$('.alert-text').on('click', function () {
    myApp.alert('Here goes alert text');
});

当然，上面的例子直接取自 F7 文档，并且依赖于点击事件，但您可以尝试将警报事件作为myApp 的方法，看看是否适合您。

【讨论】：

【解决方案3】：

var myApp = new Framework7();

//Add callback function that will be executed when Page with data-page="about" attribute will be initialized
myApp.onPageInit('dashboard', function (page) {
    console.log('dashboard page initialized');
    console.log(page);
});

// Option 2. Using live 'page:init' event handlers for each page (not recommended)
$$(document).on('page:init', '.page[data-page="dashboard"]', function (e) {
    console.log('dashboard loaded with page:init');
    createGraph();
});

上面的工作我很好..虽然没有工作。

myApp.onPageInit('dashboard', function (page) {
    console.log('dashboard page initialized');
    console.log(page);
});

【讨论】：

在我的情况下，你在哪里定义页面方法，例如，我不喜欢我必须将所有不同的页面脚本和方法放在 app.js 下的事实，它会变得大文件和混乱.我应该把逻辑分成不同的“.js”文件吗？

【解决方案4】：

如果您在 index.html 文件中编写了任何 javascript 代码，请将该代码放入

    <head> 
      <script>
         alert("testoutput"); // no alert
         console.log("TEST"); // no log
      </script>
    </head> like this, which is defined in index.html file 

Or ,if you want write JS code for some particular html file ,

Do like this

 <div class="page  close-panel" data-page="item">
 <div class="page-content">
    <div class="content-block-title">Title</div>
</div>
    <script>
      alert("testoutput"); // no alert
      console.log("TEST"); // no log
    </script>
 </div>

【讨论】：