使用Javascript模板输出innerHTML

时间:2015-05-27 19:55:27

标签: javascript jquery html templates bluetooth-lowenergy

对于我的项目,我必须扫描BLE标签并显示其RSSI的接近程度。

BLE的输出正在使用JavaScript模板。

  <body>
     <div id="header" data-role="header" data-theme="b">
        <h1>BLE overview</h1>
     </div>          
        </br>
     <div data-role="content" id="home">
        <a href="#" data-role="button" data-theme="b" data-inline="true" class="pure-button initialize">Initialize</a>
        <a href="#" data-role="button" data-theme="b" data-inline="true" class="pure-button startScan">Start Scan</a>
        <a href="#" data-role="button" data-theme="b" data-inline="true" class="pure-button stopScan">Stop Scan</a>
     </div>
        <ul data-role="list-view" class="devices"></ul>
     <div data-role="content id="result">
       <script type="text/template" id="device">     //start of the schript tag and output of the scanned BLEs
          <ul data-role="listview">
             <li data-address="{0}">
                <h2>{1}</h2>
                <a href="#" data-role="button" data-theme="b" class="pure-button connect">Connect</a>
                <div id="rssiop"> RSSI:  <div>   // value of the RSSI
                </br>   
            </li> 
         </ul>
      </script> 
   </div>       

返回rssi值的函数如下

 function startScanSuccess(obj)
{
  console.log("The RSSI value is:" + obj.rssi);  // here I see the RSSI value on the console

  if (obj.status == "scanResult")
  {
    console.log("Scan Result");

    addDevice(obj.address, obj.name);         
  }
  else if (obj.status == "scanStarted")
  {
    console.log("Scan Started");
  }
  else
  {
    console.log("Unexpected Start Scan Status");
  }
}

这是一个给出扫描BLE的名称和地址的函数

function addDevice(address, name)
{
  var $devices = $(".devices");

  var $check = $devices.find("li[data-address='{0}']".format(address));

  if ($check.length > 0)
  {
    return;

  }
  console.log("Mein RSSI: " + obj.rssi);
  document.getElementById("rssiop").innerHTML = "The RSSI value is:";
  var template = $("#device").text().format(address, name);

  $devices.append(template);   
}

所以一切正常,当我将div-tag放在模板脚本之上时,我可以看到RSSI。任何人都可以弄清楚为什么innerHTML在模板部分不起作用?

1 个答案:

答案 0 :(得分:0)

我明白了:

问题是innerHTML不起作用,因为我使用append() - 命令进行列表输出。我只需将rssi参数添加到addDevices函数中就可以了。

addDevice函数的正确代码:

function addDevice(address, name, rssi)
{
  var $devices = $(".devices");

  var $check = $devices.find("li[data-address='{0}']".format(address));

  if ($check.length > 0)
  {
    return;

  }
  var template = $("#device").text().format(address, name, rssi);

  $devices.append(template);

}