检查包含字符串的 li 项时，我的混合应用程序不会更改页面
Posted
技术标签:
【中文标题】检查包含字符串的 li 项时，我的混合应用程序不会更改页面【英文标题】：My hybrid app wont change pages when checking li item which contains a string 【发布时间】：2017-01-02 13:32:07 【问题描述】：对于我正在进行的项目，我想让我的混合应用程序（phonegap）在应用程序检测到来自 Arduino 的 BluetoothLE 信号时切换屏幕。为此，我通过几个列表项进行了代码循环，并且检查 li 项的内容与“TEST123”（我给 Arduino 的名称）相同。如果这些相同，则应用程序应切换到另一个页面。我在 GitHub 上编辑了名为“cordova-plugin-ble-central”的代码，由 Don Coleman 制作。
我编写了代码，因此它可以滚动浏览 ul 中的 li 项目，读取内容并在字符串与“TEST123”相同的情况下调用连接函数，但我的页面似乎没有切换。
感谢您的帮助！
html：
<body>
<div class="app">
<h1>BluefruitLE</h1>
<div id="mainPage" class="show">
<ul id="deviceList">
</ul>
<button id="refreshButton">Refresh</button>
</div>
<div id="detailPage" class="hide">
<div id="resultDiv"></div>
<div>
<input type="text" id="messageInput" value="Hello"/>
<button id="sendButton">Send</button>
</div>
<button id="disconnectButton">Disconnect</button>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
CSS：
body
font-family: "Helvetica Neue";
font-weight: lighter;
color: #2a2a2a;
background-color: #f0f0ff;
-webkit-appearance: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none; -webkit-user-select: none;
button
margin: 15px;
-webkit-appearance:none;
font-size: 1.2em;
#mainPage
text-align:center;
width: 100vw;
height: 100vh;
#detailPage
text-align:center;
font-size: 2em;
width: 100vw;
height: 100vh;
background-color: red;
button
-webkit-appearance: none;
font-size: 1.5em;
border-radius: 0;
#resultDiv
font: 16px "Source Sans", helvetica, arial, sans-serif;
font-weight: 200;
display: block;
-webkit-border-radius: 6px;
width: 100%;
height: 140px;
text-align: left;
overflow: auto;
#mainPage.show
display: block;
#mainPage.hide
display: none;
#detailPage.show
display: block;
#detailPage.hide
display: none;
当然还有我的 JavaScript：
'use strict';
// ASCII only
function bytesToString(buffer)
return String.fromCharCode.apply(null, new Uint8Array(buffer));
// ASCII only
function stringToBytes(string)
var array = new Uint8Array(string.length);
for (var i = 0, l = string.length; i < l; i++)
array[i] = string.charCodeAt(i);
return array.buffer;
// this is Nordic's UART service
var bluefruit =
serviceUUID: '6e400001-b5a3-f393-e0a9-e50e24dcca9e',
txCharacteristic: '6e400002-b5a3-f393-e0a9-e50e24dcca9e', // transmit is from the phone's perspective
rxCharacteristic: '6e400003-b5a3-f393-e0a9-e50e24dcca9e' // receive is from the phone's perspective
;
var app =
initialize: function()
this.bindEvents();
detailPage.hidden = true;
//ale paginas hidden behalve login
,
bindEvents: function()
document.addEventListener('deviceready', this.onDeviceReady, false);
refreshButton.addEventListener('touchstart', this.refreshDeviceList, false);
sendButton.addEventListener('click', this.sendData, false);
disconnectButton.addEventListener('touchstart', this.disconnect, false);
deviceList.addEventListener('touchstart', this.connect, false); // assume not scrolling
,
onDeviceReady: function()
app.refreshDeviceList();
,
refreshDeviceList: function()
deviceList.innerHTML = ''; // empties the list
if (cordova.platformId === 'android') // Android filtering is broken
ble.scan([], 5, app.onDiscoverDevice, app.onError);
else
ble.scan([bluefruit.serviceUUID], 5, app.onDiscoverDevice, app.onError);
,
onDiscoverDevice: function(device)
var listItem = document.createElement('li'),
html = '<b>' + device.name + '</b><br/>' +
'RSSI: ' + device.rssi + ' | ' +
device.id;
listItem.dataset.deviceId = device.id;
listItem.innerHTML = html;
deviceList.appendChild(listItem);
,
ulScroll: function()
var ul = document.getElementById("deviceList");
var items = ul.getElementsByTagName("li");
for (var i = 0; i < items.length; i++)
if ((items.textContent || items.innerText) == "TEST123")
connect: function(e)
var deviceId = e.target.dataset.deviceId,
onConnect = function(peripheral)
app.determineWriteType(peripheral);
// subscribe for incoming data
ble.startNotification(deviceId, bluefruit.serviceUUID, bluefruit.rxCharacteristic, app.onData, app.onError);
sendButton.dataset.deviceId = deviceId;
disconnectButton.dataset.deviceId = deviceId;
resultDiv.innerHTML = "";
app.showDetailPage();
;
ble.connect(deviceId, onConnect, app.onError);
,
disconnect: function(event)
var deviceId = event.target.dataset.deviceId;
ble.disconnect(deviceId, app.showMainPage, app.onError);
,
showMainPage: function()
document.getElementById("mainPage").className = "show";
document.getElementById("detailPage").className = "hide";
,
showDetailPage: function()
document.getElementById("detailPage").className = "show";
document.getElementById("mainPage").className = "hide";
,
onError: function(reason)
alert("ERROR: " + reason);
;
附：非常抱歉没有组织的代码
【问题讨论】：
connect:function(e) 在函数内部应该做什么？那是对象语法！！ 我对此比较陌生，您能解释一下您的意思吗？我猜是我应该在那里调用函数并将connect：函数放在函数之外 deviceList 未定义，对我来说，将函数输出写入 html，然后从中解析回来是没有意义的。这不符合所有逻辑...... 整个结构没有意义，可以从头重写，学好js再写copy+paste代码... 将函数输出到 html 是我们在课堂上的想法，这对我来说也很奇怪。 deviceList 是我从 github 编辑的代码中获得的。我看不出它做了什么，并想出了一个解决方案 【参考方案1】：我将如何构建代码：
var app=
devices:[], //thats were the devices are stored
onDeviceReady:refreshDeviceList,
refreshDeviceList: function()
deviceList.innerHTML = ''; // empties the list
this.devices=[];
if (cordova.platformId === 'android') // Android filtering is broken
ble.scan([], 5, app.onDiscoverDevice, app.onError);
else
ble.scan([bluefruit.serviceUUID], 5, app.onDiscoverDevice, app.onError);
//all devices checked, lets search ours:
var my=this.devices.find(device => device.name=="TEST123");
if(my)
ble.connect(my.id,app.onconnect,errorhandling);
else
alert("my device not found");
,
onDiscoverDevice: function(device)
//add to html
var listItem = document.createElement('li'),
html = '<b>' + device.name + '</b><br/>' +
'RSSI: ' + device.rssi + ' | ' +
device.id;
listItem.innerHTML = html;
deviceList.appendChild(listItem);
//add to devices:
this.devices.push(device);
,
onconnect:function(e)
//your connect function
补充说明：
refreshButton etc are undefined. You need to find them:
var refreshButton=document.getElementById("refreshButton");
【讨论】：
我正在摆脱刷新按钮等，因为我希望在找到信号时进行切换。我看到了重组，并为此感谢！我将检查代码是否以这种方式工作，以及何时修复代码中当前存在的错误。 我猜 onconnect 函数应该包含 app.showDetailPage();但这似乎不起作用。我也尝试了代码的连接部分，但这似乎也不起作用。我看到你已经使用了触发onconnect功能的ble.connect，对吗？因为如果那是真的，我认为 app.ShowDetailPage ();应该足够了。 没错，没错 如果我认为您的新结构化代码涵盖了从 refreshdevicelist 到断开功能的旧代码，我是对的吗？因为如果那是真的，我想我可能犯了另一个错误，因此屏幕不会切换 我的代码只涵盖了设备刷新/连接的内容，而您的代码中完全错误以上是关于检查包含字符串的 li 项时，我的混合应用程序不会更改页面的主要内容，如果未能解决你的问题，请参考以下文章
点击 NavigationBar 和 NavigationBar 项时 UIPopoverController 不会关闭