javascript - How to Persist Dynamically Added Conditions in a Custom Node in Node-RED? - Stack Overflow

admin管理员组

文章数量:1122826

I’m working on a custom Node-RED node that allows users to define dynamic conditions based on two properties: name and age. Users can dynamically add conditions using a button, where each condition consists of a property, operator, and parameter. By default, I want to provide two conditions (one for name and one for age), and users can modify the operator and add the parameter.

The problem I’m facing is that dynamically added conditions do not persist after the user clicks "Done" in the node's dialog. When I deploy the flow and reopen the node, the previously set conditions are lost, even though I attempt to save them in the oneditsave function.

Here is a simplified version of my code:

RED.nodes.registerType('condition-task', {
    category: 'function',
    color: '#a6bbcf',
    defaults: {
        name: { value: "" },
        conditions: [] // Empty array for dynamic conditions
    },
    inputs: 1,
    outputs: 3,
    icon: "file.svg",
    label: function () {
        return this.name || "condition-task";
    },
    oneditprepare: function () {
        const conditionList = $("#node-input-conditions");
        conditionList.empty(); // Clear any existing conditions

        // Populate the conditions from the saved configuration (if any)
        this.conditions.forEach(condition => {
            conditionList.append(createConditionRow(condition));
        });

        // Add new condition row
        $("#add-condition").on("click", function () {
            conditionList.append(createConditionRow());
        });
    },
    oneditsave: function () {
        const conditions = [];
        $("#node-input-conditions li").each(function () {
            const property = $(this).find(".condition-property").val();
            const operator = $(this).find(".condition-operator").val();
            const parameter = $(this).find(".condition-parameter").val();
            conditions.push({ property, operator, parameter });
        });
        this.conditions = conditions; // Save to node config
    }
});

HTML Template:

<script type="text/html" data-template-name="condition-task">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label><i class="fa fa-list"></i> Conditions</label>
        <ol id="node-input-conditions" style="list-style: none; padding: 0;">
            <li style="margin-bottom: 5px;">
                <select class="condition-property" style="width: 30%;">
                    <option value="name" selected>name</option>
                    <option value="age">age</option>
                </select>
                <select class="condition-operator" style="width: 20%;">
                    <option value="==" selected>==</option>
                    <option value="!=">!=</option>
                </select>
                <input type="text" class="condition-parameter" placeholder="Parameter" style="width: 30%;" value="">
            </li>
        </ol>
        <button id="add-condition" class="red-ui-button red-ui-button-small">
            <i class="fa fa-plus"></i> Add Condition
        </button>
    </div>
</script>

Problem: After dynamically adding conditions and setting values for the property, operator, and parameter, the conditions are not saved when I click "Done" in the node’s edit dialog. When I deploy the flow and reopen the node, all previously set conditions are lost. This is occurring even though I attempt to save the conditions using the oneditsave function. The goal is to save all dynamically added conditions (property, operator, and parameter) and ensure they persist after deployment and reopening of the node. What I’ve Tried: I used the oneditsave function to gather the conditions and save them to the node’s configuration, but it doesn’t persist the changes. I’ve tried populating the conditions dynamically when the node's edit dialog is opened, but the previously added conditions do not appear after deployment. Expected Behavior: The dynamically added conditions (property, operator, and parameter) should be saved when the user clicks "Done" in the node’s edit dialog and should persist after deployment and when the node is reopened.

本文标签： javascriptHow to Persist Dynamically Added Conditions in a Custom Node in NodeREDStack Overflow