如何向JSRender模板传递多数据集及实现字段ID前缀？

Got it, let's tackle how to pass extra data (like button IDs and form IDs) to the header spots in your JSRender template. This approach fits seamlessly with your existing working code, so you won't have to overhaul everything.

Step 1: Update Your Template to Accept Extra Variables #

First, replace those placeholder ***** spots in your template with JSRender variable references. We'll use descriptive names so it's clear what each one does:

<script id="UpdateTemplate" type="text/x-jsrender">
<div class="ms-PanelPoultry">
<button class="ms-Button" id="{{>panelTriggerId}}" style="visibility: hidden">
<span class="ms-Button-label">Open Panel</span>
</button>
<div class="ms-Panel ****">
<div class="ms-Panel-contentInner">
<p class="ms-Panel-headerText"></p>
<div class="ms-Panel-content">
<span class="ms-font-m">
<span style="color:#006; font-size:large">***</span>
<hr>
<form id="{{>updateFormId}}">
<table width="100%" border="0">
{{for fields}} <!-- Point this to our fields array in the render data -->
{{if (#index) % 3 === 0 }}
</tr>
<tr>
<td>
<div class="form-group">
<label for={{>name}}>{{>label}}</label>
<input type={{>type}} class="form-control" id={{>name}}Update> <!-- Your existing prefix stays here -->
</div>
</td>
{{else}}
{{if #index === 0 }}
<tr>
<td>
<div class="form-group">
<label for={{>name}}>{{>label}}</label>
<input type={{>type}} class="form-control" id={{>name}}Update>
</div>
</td>
{{else}}
<td style="padding-left:15px;">
<div class="form-group">
<label for={{>name}}>{{>label}}</label>
<input type={{>type}} class="form-control" id={{>name}}Update>
</div>
</td>
{{/if}}
{{/if}}
{{/for}}
</table>
<hr>
<table>
<tr>
<td>
<button type="submit" id="EditProductiebedrijfButton" class="btn btn-primary">Submit</button>
<button class="btn btn-secondary" type="Cancel" onClick="panelInstance.dismiss();">Cancel</button>
</td>
</tr>
</table>
</form>
</span>
</div>
</div>
</div>
</div>
</script>

Key changes made:

• Button ID replaced with {{>panelTriggerId}}
• Form ID replaced with {{>updateFormId}}
• {{for}} loop updated to {{for fields}} (we'll map this to your existing Updatefields array next)

Step 2: Prepare Your Render Data with Extra Parameters #

Instead of passing just the Updatefields array directly, wrap it in an object that includes your extra header data. This lets JSRender access both the form fields and custom IDs in one go:

var Updatefields = [
{ name: "field1", type: "text", label: "blabla" },
{ name: "field2", type: "text", label: "bla" },
{ name: "field3", type: "date", label: "blablaaa" }
];

// Combine fields array and extra header data into one object
var renderData = {
  fields: Updatefields,
  panelTriggerId: "customOpenPanelBtn", // Replace with your desired button ID
  updateFormId: "customUpdateForm"      // Replace with your desired form ID
};

// Render the template with the combined data
var template = $.templates("#UpdateTemplate");
var renderedHtml = template.render(renderData);

// Insert the rendered HTML into your page (adjust the selector to match your container)
$("#yourTargetContainer").html(renderedHtml);

How This Works #

JSRender lets you pass complex objects as render data, and you can reference any top-level property directly in the template using {{>propertyName}}. By wrapping your fields array and extra IDs into one object, you keep everything organized without breaking your existing form rendering logic.

If you ever need to add more extra data (like a custom panel title, for example), just add another property to the renderData object and reference it in the template the same way.

内容的提问来源于stack exchange，提问作者hacking_mike