使用 Javascript 模板的 innerHTML 输出

Question

对于我的项目，我必须扫描 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>

函数，return 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-标签放在模板脚本上方时，我可以看到 RSSI。谁能弄清楚为什么 innerHTML 在模板部分不起作用？

Answer 1

我想通了：

问题是 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);

}

使用 Javascript 模板的 innerHTML 输出

innerHTML output with Javascript template

html

javascript

jquery

templates

bluetooth-lowenergy