Migrate jqhtml slot syntax from <#name> to <Slot:name>

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
root
2025-11-24 03:43:45 +00:00
parent 22df126977
commit 881425bed6
35 changed files with 124 additions and 122 deletions

View File

@@ -265,23 +265,23 @@ DATAGRID
$per_page=15
class="card DataGrid">
<#DG_Card_Header>
<Slot:DG_Card_Header>
<Card_Title>Client List</Card_Title>
<Card_Header_Right>
<Search_Input $sid="filter_input" $placeholder="Search..." />
</Card_Header_Right>
</#DG_Card_Header>
</Slot:DG_Card_Header>
<#DG_Table_Header>
<Slot:DG_Table_Header>
<tr>
<th data-sortby="id">ID</th>
<th data-sortby="name">Name</th>
<th data-sortby="created_at">Created</th>
<th>Actions</th>
</tr>
</#DG_Table_Header>
</Slot:DG_Table_Header>
<#row>
<Slot:row>
<tr data-href="<%= Rsx.Route('Clients_View_Action', row.id) %>">
<td><%= row.id %></td>
<td><%= row.name %></td>
@@ -297,7 +297,7 @@ DATAGRID
</div>
</td>
</tr>
</#row>
</Slot:row>
</Define:Clients_DataGrid>

View File

@@ -1316,25 +1316,25 @@ CONTENT AND SLOTS
</div>
</Define:Card_Layout>
Parent templates provide content using <#slotname> tags:
Parent templates provide content using <Slot:slotname> tags:
<!-- Use with named slots -->
<Card_Layout>
<#header><h3>User Profile</h3></#header>
<#body>
<Slot:header><h3>User Profile</h3></Slot:header>
<Slot:body>
<p>Name: <%= this.data.name %></p>
<p>Email: <%= this.data.email %></p>
</#body>
<#footer>
</Slot:body>
<Slot:footer>
<button class="btn">Save</button>
</#footer>
</Slot:footer>
</Card_Layout>
Critical rules:
- Cannot mix regular content with named slots
- If ANY named slots present, ALL content must be in slots
- Child template syntax: <%= content('slotname') %>
- Parent template syntax: <#slotname>content</#slotname>
- Parent template syntax: <Slot:slotname>content</Slot:slotname>
Decision Guide:
Use content() when:
@@ -1378,17 +1378,17 @@ CONTENT AND SLOTS
Child template - slot-only (Users_DataGrid.jqhtml):
<Define:Users_DataGrid>
<#header>
<Slot:header>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</#header>
</Slot:header>
<#row>
<Slot:row>
<td><%= row.id %></td>
<td><%= row.name %></td>
<td><%= row.email %></td>
</#row>
</Slot:row>
</Define:Users_DataGrid>
Result: Users_DataGrid renders using DataGrid_Abstract HTML
@@ -1399,9 +1399,9 @@ CONTENT AND SLOTS
<%= content('slotname', data) %>
Child templates receive data via slot parameter:
<#row>
<Slot:row>
<td><%= row.id %></td>
</#row>
</Slot:row>
The slot parameter name matches the slot name automatically.
@@ -1409,9 +1409,9 @@ CONTENT AND SLOTS
Slot names cannot be JavaScript reserved words.
Parser rejects with fatal error:
<#function>Content</#function> <!-- ERROR: reserved word -->
<#if>Content</#if> <!-- ERROR: reserved word -->
<#header>Content</#header> <!-- Valid -->
<Slot:function>Content</Slot:function> <!-- ERROR: reserved word -->
<Slot:if>Content</Slot:if> <!-- ERROR: reserved word -->
<Slot:header>Content</Slot:header> <!-- Valid -->
Reserved words include: function, if, for, class, const, let,
var, while, switch, return, try, catch, and others.

View File

@@ -251,18 +251,18 @@ EXAMPLES
<Define:DataGrid class="datagrid">
<table>
<thead>
<#header>
<Slot:header>
<% for (let col of this.data.columns) { %>
<th><%= col.title %></th>
<% } %>
</#header>
</Slot:header>
</thead>
<tbody>
<% if (this.data.records.length === 0) { %>
<tr><td colspan="100"><#empty>No records</#empty></td></tr>
<tr><td colspan="100"><Slot:empty>No records</Slot:empty></td></tr>
<% } else { %>
<% for (let [idx, record] of this.data.records.entries()) { %>
<tr><#row /></tr>
<tr><Slot:row /></tr>
<% } %>
<% } %>
</tbody>