framework7 页面初始化事件未触发
framework7 Page Init Event Not Firing
我正在尝试使用 framework7,但无法触发页面初始化事件。我使用的代码非常简单,而且我非常仔细地遵循了 the documentation。无论我做什么,它都不会触发(没有任何内容记录到控制台,也没有错误)。
我创建了一个 pen here showing the problem。
我也用回调myApp.onPageInit
试过了。纳达.
非常感谢任何帮助。
JS代码
var myApp = new Framework7({});
var $ = Dom7;
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
$(document).on('page:init', function (e) {
alert("processing page init");
});
HTML
<div class="views">
<div class="view view-main navbar-through toolbar-through">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Framework7</div>
</div>
</div>
<div class="toolbar">
<div class="toolbar-inner">
<a href="#" class="link">Left</a>
<a href="#" class="link">Right</a>
</div>
</div>
<div class="pages">
<div class="page" data-page="home">
<div class="page-content">
<div class="content-block">
<p>Hi there!</p>
</div>
</div>
</div>
</div>
</div>
</div>
可以通过init app manually解决(有时当内容在第一个文件中加载时不会触发事件)
或者尝试触发你的首页回调(link第三点)
@SuperDuperApps,我设法 运行 了代码。与 Djiggy 建议的非常相似,如果您延迟 init 它对我有用(如下)。但是,如果您不想在第一页和后续页面上调用它,那么您的代码就可以使用。只需尝试添加一个 link(到 about.html),类似于文档中的内容,它可以工作
var myApp = new Framework7({
init: false
});
var $ = Dom7;
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
$(document).on('page:init', function (e) {
alert("processing page init");
});
myApp.init()
注意:PageInit 不会在返回时调用。
这在版本 3 中已经改变。现在,doing the exact same thing 可以通过这样做来完成:
var myApp = new Framework7({
...
init: false
});
myApp.on('init', function(e) {
alert('app init event fired');
});
myApp.init();
下一页有详细信息
https://framework7.io/docs/page.html#page-events
我是这样使用的:在app.js
var app = new Framework7({
id: 'io.framework7.testapp',
root: '#app',
...
on: {
pageInit: function (e, page) {
console.log('page init -> route.name=' + e.route.name);
if(e.route.name === "searchPage") {
app.methods.searchPageInitMethod(e);
}
},
},
methods: {
searchPageInitMethod: function (e) {
console.log("Page Route Params:" + app.views.main.router.currentRoute.params)
},
},
...
}
我的路线 table(routes.js) 是这样的:
var routes = [
...
{
name: "searchPage",
path: '/search/:keyword/',
url: './pages/page-search.html',
},
...
];
我正在尝试使用 framework7,但无法触发页面初始化事件。我使用的代码非常简单,而且我非常仔细地遵循了 the documentation。无论我做什么,它都不会触发(没有任何内容记录到控制台,也没有错误)。
我创建了一个 pen here showing the problem。
我也用回调myApp.onPageInit
试过了。纳达.
非常感谢任何帮助。
JS代码
var myApp = new Framework7({});
var $ = Dom7;
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
$(document).on('page:init', function (e) {
alert("processing page init");
});
HTML
<div class="views">
<div class="view view-main navbar-through toolbar-through">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Framework7</div>
</div>
</div>
<div class="toolbar">
<div class="toolbar-inner">
<a href="#" class="link">Left</a>
<a href="#" class="link">Right</a>
</div>
</div>
<div class="pages">
<div class="page" data-page="home">
<div class="page-content">
<div class="content-block">
<p>Hi there!</p>
</div>
</div>
</div>
</div>
</div>
</div>
可以通过init app manually解决(有时当内容在第一个文件中加载时不会触发事件)
或者尝试触发你的首页回调(link第三点)
@SuperDuperApps,我设法 运行 了代码。与 Djiggy 建议的非常相似,如果您延迟 init 它对我有用(如下)。但是,如果您不想在第一页和后续页面上调用它,那么您的代码就可以使用。只需尝试添加一个 link(到 about.html),类似于文档中的内容,它可以工作
var myApp = new Framework7({
init: false
});
var $ = Dom7;
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
$(document).on('page:init', function (e) {
alert("processing page init");
});
myApp.init()
注意:PageInit 不会在返回时调用。
这在版本 3 中已经改变。现在,doing the exact same thing 可以通过这样做来完成:
var myApp = new Framework7({
...
init: false
});
myApp.on('init', function(e) {
alert('app init event fired');
});
myApp.init();
下一页有详细信息
https://framework7.io/docs/page.html#page-events
我是这样使用的:在app.js
var app = new Framework7({
id: 'io.framework7.testapp',
root: '#app',
...
on: {
pageInit: function (e, page) {
console.log('page init -> route.name=' + e.route.name);
if(e.route.name === "searchPage") {
app.methods.searchPageInitMethod(e);
}
},
},
methods: {
searchPageInitMethod: function (e) {
console.log("Page Route Params:" + app.views.main.router.currentRoute.params)
},
},
...
}
我的路线 table(routes.js) 是这样的:
var routes = [
...
{
name: "searchPage",
path: '/search/:keyword/',
url: './pages/page-search.html',
},
...
];