B
B
Breezy
Search…
Template querying
Superglue's thunks work hand-in-hand with PropsTemplate to query your JSON template for nodes. This guide helps you understand how the tools work with each other.

The props_at param

The props_at param is a keypath to nodes in your tree and is used exclusively with the remote thunk. On the PropsTemplate side, we pass that param over to an internal node in order to walk your templates.
For example, with a template below.
1
json.data(search: params[:props_at]) do
2
json.header do
3
json.search do
4
# Results is a leaf node
5
json.results Post.search(params[:some_search_str])
6
end
7
end
8
9
json.content do
10
json.bar_chart do
11
...bar chart data
12
end
13
14
...
15
end
16
17
...
18
end
Copied!
To fetch the json.search node, we would need to walk to data then header then search. Translating that to a remote call with a props_at param:
1
remote('/dashboard?props_at=data.header.search&some_search_str=haircuts')
Copied!

Collections

There are two ways to query collections. Looking at the following example:
1
json.data(search: params[:props_at]) do
2
json.posts do
3
json.array! @posts do |post|
4
json.details do
5
json.title post.title
6
end
7
end
8
end
9
end
Copied!

Index-based selection

You may use an index-based key to fetch an item in a list like so:
1
remote('/dashboard?props_at=data.posts.0.details')
Copied!
To enable this functionality, you are required to implement member_at(index) on the passed collection.
?> PropsTemplate includes a Array extension which delegates to at. If you've used the Superglue generators, it will be included in an initializer.
While traversing by index works fine, it can lead the wrong post being updated if your Redux state has changed by the time the request comes back.

Attribute-based selection

Attribute-based keys for collections look like this:
1
remote('/dashboard?props_at=data.posts.some_id=1.details')
Copied!
Notice that we're now referencing the collection member by some_id=1 instead of index. This will fetch the node from the backend and graft it correctly in Redux.
To enable this, you are required to implement member_by(attribute, value) on the passed collection AND use the option :key in json.array!. For example:
1
json.data(search: params[:props_at]) do
2
json.posts do
3
json.array! @posts, key: :some_id do |post|
4
json.details do
5
json.title post.title
6
end
7
8
# The following will be auto appended by the key: option
9
# json.some_id post.some_id
10
end
11
end
12
end
Copied!

Partials

You can even query into partials.
1
remote('/dashboard?props_at=data.posts.some_id=1.details')
Copied!
1
json.data(search: params[:props_at]) do
2
json.posts(partial: 'list_of_posts')do
3
end
4
end
Copied!
1
# list_of_posts.json.props
2
json.array! @posts , key: :some_id do |post|
3
json.details do
4
json.title post.title
5
end
6
7
# The following will be auto appended by the key: option
8
# json.some_id post.some_id
9
end
Copied!
!> When querying, Superglue will disable caching and deferment until the target node is reached.
That's the basics of traversing with Superglue. A lot of modern SPA functionality can be achieved by just a few lines of code. For examples, see our recipes section.
Last modified 16d ago