引用Cordova/Onsen中的模板HTML元素
Referencing Templated HTML Elements in Cordova/Onsen
这可能不是Cordova/Onsen特有的,但我是Javascript的新手,所以我只是提供我认为相关的信息。我想知道引用模板HTML元素的正确方法是什么
HTML:
<ons-navigator title="myApp" var="myNavigator">
<ons-page id="mainPage">
<ons-toolbar>
<div class="center">Title</div>
</ons-toolbar>
<ons-list>
<ons-list-item id="button" modifier="chevron">
Button Text
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
<ons-template id="newPage.html">
<ons-page id="newPage">
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Page Title</div>
</ons-toolbar>
<button id="submit-btn" class="button button--large">Submit</button><br>
</ons-page>
</ons-template>
Javascript:
(function () {
"use strict";
/* Event Registration */
document.addEventListener('deviceready', onDeviceReady.bind(this), false);
// Listening for pageinit event to grab submit button.
document.addEventListener("pageinit", function (event) {
console.log("init Fired!");
if (event.target.id == "newPage") {
initPage();
}
}, false);
function initPage() {
$('#submit-btn').on('click', doSomethingUseful);
}
function onDeviceReady() {
// Handle the Cordova pause and resume events
document.addEventListener( 'pause', onPause.bind( this ), false );
document.addEventListener('resume', onResume.bind(this), false);
// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
$('#button').on('click', function () {
myNavigator.pushPage('newPage.html', { animation: 'slide' })
});
};
} )();
本质上,我在等待Onsen发出pageinit事件的信号,然后再从模板化页面中获取按钮。页面加载后,即按下"按钮"时,会发送pageinit信号。
尽管这是有效的,但感觉应该有更好的方法来做到这一点。在设置按钮处理程序和其他东西之前,不必等待页面加载,我似乎应该能够提前设置它们。但是,如果我试图在加载页面之前访问模板化元素,它就不起作用(jQuery选择器返回null)。
仅供参考,我没有使用Angular。(大多数Onsen的例子都在Angular中,但我目前正在学习足够多的新东西,不想在这一点上增加混乱。)
正如@Munsterlander所提到的,您不能将事件附加到尚未添加到DOM的元素。目前,你正在做的事情被认为是最好的做事方式。因此,我只建议在不改变其总体思想的情况下,尝试简化现有代码。例如:内联某些函数并使用ons.ready
而不是deviceready
。该代码的一个相同且更简单的版本可以是:
document.addEventListener("pageinit", function (event) {
console.log("init Fired!");
if (event.target.id == "newPage") {
$('#submit-btn').on('click', doSomethingUseful);
}
});
ons.ready(function () {
document.addEventListener( 'pause', onPause.bind( this ), false );
document.addEventListener('resume', onResume.bind(this), false);
// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
$('#button').on('click', function () {
myNavigator.pushPage('newPage.html', { animation: 'slide' })
});
});
通常我也会建议用页面的id制作一个类似对象的东西。类似于:
var handlers = {
newPage: function(e) { $('#submit-btn').click(doSomethingUseful); },
page2: function(e) { $('#submit-btn2').click(doSomethingUseful2); }
};
和
document.addEventListener('pageinit', function(e) {
if (handlers.hasOwnProperty(e.target.id)) {
handlers[e.target.id](e);
}
});
我想现在是你想要的真正答案的时候了。由于在元素被添加到DOM之前无法侦听它们,因此如果您愿意,可以像处理pageinit
事件一样侦听事件并过滤它们的目标。使用jQuery有一种相对简单的方法:
$(document).on(eventName, selector, handler);
所以你可以在任何时候这样做
$(document).on('click', '#submit-btn', doSomethingUseful);
它将工作,因为它将处理程序附加到文档而不是元素。因此,这将适用于将来添加到DOM中的所有#submit-btn
。:)(尽管这不是很建议你做的,如果你想的话,你仍然可以做。)
- 如何设置html元素填充的动画
- 删除对HTML元素的拖动
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 如何使用JQuery在Javascript中转换字符串中的HTML元素
- 一个html元素的克隆次数太多
- 使用AngularJS Directive WHITOUT$scope创建一个动态html元素
- 为什么我在Internet Explorer上看不到html元素
- 重新排列HTML元素的顺序并更改内容
- 使用.on动态添加jquery/js不知道的html元素
- 如果类不是一个选项,如何在使用 jQuery 时控制(避免)嵌套 html 元素的样式
- 如何将html元素添加到tampermonkey中
- 访问html元素值javascript
- 如何在HTML元素上创建函数,而不是将元素作为参数传递
- 自定义HTML元素属性未显示-Web组件
- 让HTML元素充当停止滚动的锚点
- 将html元素插入到文本字符串中,以匹配另一个html字符串
- 替换HTML元素中的字符
- 如何将html元素添加为生成的内容
- 如何使用JavaScript在没有html dom的情况下隐藏html元素
- 使用JS加载HTML元素