Question

我正在使用electronicjs开发一个简单的项目，我的目标是使用多播发现连接到我的本地网络，将它们加载到我的电子窗口中，并选择其中一个（通过IP）。多播部分已经完成，并且使用把手模板正确加载了设备（我第一次使用把手和DOM操作）。

我的问题是我不知道如何从当前使用的模板中选择IP（因为我真正需要的是将角度项目链接到该IP）。 SELECT AS SOURCE NODE按钮应该执行一个功能，我可以将标签中检索到的IP传递给该函数，或者通过任何其他方式来检索该模板实例上的IP。

html模板

 CurrentPath = CurrentProject.Path & "\" & CurrentProject.Name
    myBackupDir = CurrentProject.Path & "\" & "Test\"
    myBackupPath = myBackupDir & myBackupFileName

 <div class="row" id="nodes"> </div> <script id="entry-template" type="text/x-handlebars-template"> <div class="col-xs-4 p-2"> <div class="card text-center"> <div class="card-header"> <h5 class="card-title">Node: {{counter}}</h5> </div> <div class="card-body"> <label id="labelIP"> {{nodo}}</label> <hr> </div> <div class="card-footer"> <button id="btnSelect" class="btn btn-danger btn-sm"> SELECT AS SOURCE NODE </button> </div> </div> </div> </script>是接收多播消息时推送每个设备ip的位置。

NodeJS函数，用于添加多播接收的每个设备/节点

ipNodes

问题是我想从每个标签中检索每个动态创建的IP。习惯了角度指令和双向数据绑定，我什至不知道这是否可行。

为澄清起见，用视觉表示法

Answer 1

请尝试一下。我在回答中使用jQuery。我没有检查它是否正常工作。

$("#nodes").on("click",".btn-danger", function() {
console.log("IP selected = ", $(this).closest(".card").find("#labelIP").text());
});

如果要将事件添加到动态添加的元素，则可以使用jQuery的.on()函数。

Answer 2

决定将方法更改为更简单的选择（例如select）。

<div class="selectArea">

            <form id="myForm">
                <div class="form-group">
                    <select class="form-control" id="selectNumber">
                        <option>Choose a node</option>
                    </select>
                </div>
            </form>
        </div>
        <div class="nodesArea" id="nodes">
            <label id="labelListen"></label>


        </div>
    </div>

    <script id="entry-template" type="text/x-handlebars-template">
        <div class="col-xs-4 p-2">
            <div class="card text-center">
                <div class="card-header">
                    <h5 class="card-title">Node: {{counter}}</h5>
                </div>
                <div class="card-body">
                    <label id="labelIP">
                 {{nodo}}</label>
                    <hr>
                </div>
            </div>
        </div>
    </script>

var select = document.querySelector('#selectNumber');
select.addEventListener('change', (event) => {

    console.log(event.target.value);
    /*const result = document.querySelector('.result');
    result.textContent = `You like ${event.target.value}`;*/
});


var addNode = async function() {

    const nodes = document.querySelector('#nodes');

    var opt = ipNodes.slice(-1).pop();
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);




    var source = document.getElementById("entry-template").innerHTML;

    var template = handlebars.compile(source);

    var context = { nodo: opt, counter: counterList };

    nodes.innerHTML += template(context);

    counterList++;

}

在javascript中选择动态创建的元素

2 个答案: