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:
@@ -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>
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user