No Template Specified

element, that is a list that will repeat n times. Like the following example, where we can output a custom summary. ```handlebars {{#each posts as |post|}}

{{post.title}}

{{yield}}

{{/each}} ``` Which can be used like so: ```handlebars {{#post-list posts=model}} Greatest post ever! {{/post-list}} ``` And will result in the following HTML: ```html

Tomster goes to town

Greatest post ever!

Tomster on vacation

Greatest post ever!

``` But what use is it to just output the same thing over and over? Don't we want to customize our posts, and display the right content? Sure we do. Lets explore the {{yield}} helper a bit. Data Down To accomplish composability beyond just simple templates, we need to pass context to those templates. This can be done with the `{{yield}}` helper. The `{{yield}}` defines where the template we defined inside our component block will yield in the component's layout, as we saw in the previous section. Apart from that, the yield helper also allows us to send data down, providing a context for the templates. ```handlebars {{yield}} {{yield "hello"}} {{yield item}} {{yield this "bye"}} ``` By default yield does not send any context, but you can provide an arbitrary number of arguments. Once you are sending data down, the child components need to consume that data. We can do this with the as operator. Let's take {{yield user "My Item"}} as an example: ```handlebars {{#user-list users=model as |user title|}}

{{title}}

{{user-card user=user}} {{/user-list}} ``` Now `{{user-card}}` has access to the current user, which would change if `{{user-list}}` placed it's yield helper inside an each block. This opens up the possibility to use the `{{component}}` helper for different templates, for example: ```handlebars

Profile

{{yield "user-avatar" user}} {{yield "user-contact" user}} {{#user-profile user=model as |section user|}} {{component section user=user}} {{/user-profile}} ``` With the `{{component}}` helper, we can bind our context to names of components dynamically, which in this case means that we can customize the user profile with custom components bound to the relevant data. This means we can have multiple extension points in our components, making them much more versatile. Actions Up Now that we can send data down, we probably want to manipulate that data via some user interaction, like changing a user's avatar, or whatever it is you're doing. We can accomplish this by using actions. Actions are great, but for actions to work in the right context, we must use the targetObject property to specify where we want the action to go. Before we can specify the targetObject property on our "acting" component, we need to expose that target as the context. ```handlebars {{yield this}} ``` The targetObject is the component that you want to handle the action, in this case it's the parent component. ```handlebars {{#user-profile user=model as |profile|}} {{user-avatar change="updateAvatar" targetObject=profile}} {{/user-profile}} ``` Since profile is the instance of the {{user-profile}} component, that means it can accept the "updateAvatar" action request. The action must be defined on the user profile component instance. Here's a mash-up of the possible scenarios with actions: ```handlebars {{#full-post post=model as |fullPost|}} {{post-like like="like" targetObject=fullPost}} {{post-subscribe subscribe="subscribe" targetObject=fullPost}} {{comment-box submit="addComment" targetObject=post viewName="commentBox"}} Zen Mode {{/full-post}} ``` Note: When using `{{action}}` helpers, instead of a component, you need to specify target instead of targetObject. Also, when working with actions and sibling components, use viewName to "export" the sibling component instance as a possible target.]]>https://ilyaradchenko.com/users/knownasilya/notes/cltluzcna000dn3bbsbk7cyvvusers/knownasilya/notes/cltluzcna000dn3bbsbk7cyvvSun, 10 Mar 2024 18:39:21 GMThttps://ilyaradchenko.com/users/knownasilya/notes/clthteeb40005n3bbkxnlcfwjusers/knownasilya/notes/clthteeb40005n3bbkxnlcfwjThu, 07 Mar 2024 22:43:59 GMThttps://ilyaradchenko.com/users/knownasilya/notes/cltdvlnuk0001n3bbh3vcsi9zusers/knownasilya/notes/cltdvlnuk0001n3bbh3vcsi9zTue, 05 Mar 2024 04:34:32 GMThttps://ilyaradchenko.com/users/knownasilya/notes/clt22cc3c0001n3bbjnydhaptusers/knownasilya/notes/clt22cc3c0001n3bbjnydhaptSun, 25 Feb 2024 22:10:00 GMT Go therefore and make disciples of all nations, baptizing them in the name of the Father and of the Son and of the Holy Spirit, and teaching them to obey everything that I have commanded you. And remember, I am with you always, to the end of the age. (Matthew 28:19-20). If we don't believe that (and there are many reasons that the bible gives us to believe that), it's almost a hopeless faith. While we are asking for Jesus to work in this world and in the same breath we are asking to be taken out of it. This doesn't feel like the ethos of Jesus or the bible. Are you optimistic? Give [Paradise Restored by David Chilton (free pdf download)](https://www.garynorth.com/freebooks/docs/pdf/paradise_restored.pdf) a read, it really opens up a lot on how to read Revelation. Also this [interview (spotify)](https://open.spotify.com/episode/6Re2qwYE1OWUgFWxZmUxAQ?si=UNPeu-WwQr6QfBFzNkjiDw) of David Shannon about Optimistic Eschatology is very good.]]>https://ilyaradchenko.com/users/knownasilya/notes/clsqon8jy0003n3bbrb0s09plusers/knownasilya/notes/clsqon8jy0003n3bbrb0s09plSat, 17 Feb 2024 23:01:06 GMThttps://ilyaradchenko.com/users/knownasilya/notes/clso4qvrq0001n3bbltk9q3vqusers/knownasilya/notes/clso4qvrq0001n3bbltk9q3vqFri, 16 Feb 2024 04:08:32 GMThttps://ilyaradchenko.com/users/knownasilya/notes/clrxycj6q0001n3bb9luz8mgyusers/knownasilya/notes/clrxycj6q0001n3bb9luz8mgySun, 28 Jan 2024 20:27:24 GMThttps://ilyaradchenko.com/users/knownasilya/notes/clrxxzjsr0003n3bbiv0hi31zusers/knownasilya/notes/clrxxzjsr0003n3bbiv0hi31zSun, 28 Jan 2024 20:17:18 GMT this.stateMap.set(item, { selected: false })); } } ``` The above code takes the data, which might look something like `[{ name: 'Item 1', description: 'Something here' }, { ... }]` and associates each item to a state object, in this case it's `{ selected: false }`, which is the initial state. ## Show Me The State Normally you iterate over your state using the built-in `each` template helper, but since we are iterating over a map, we use the `each-in` helper instead: ```handlebars {{#each-in this.stateMap as |item state|}}
{{/each-in}} ``` You'll notice that `each-in` yields the key and the value from our map, and in this case the key is our data and the value our state, so we label it by what it is. To set the value we send the `item` to our action called `toggleSelected` which we'll declare next. ## Changing State We cannot use the `mut` or the `set` (awesome little helper provided by https://github.com/pzuraq/ember-simple-set-helper, did I mention that Chris has so many great addons?) because the state itself is not reactive, but we can set a new state value for our key (POJO state). ```js @action toggleSelected(item) { let { selected } = this.stateMap.get(item); this.stateMap.set(item, { selected: !selected }); } ``` We get the original value, which we could have passed to our action but I decided to show the process for the sake of this post, and we set a new state value for our key. This will cause an update to our state and the new value will update in the template. ## Closing I've found this pattern to be nice because it keeps the two things separated. It reminds me of the https://github.com/stefanpenner/ember-state-services addon, which has some nice helpers for accessing one item but isn't great when managing a collection. The method using `TrackedMap` is following new Octane paradigms for state, and I've been enjoying using it because it's less magic. I think it could be improved by a custom `set-map` helper (or some other name) so you don't have to define an action to toggle a property. What other new state patterns have you started using in your Octane apps?]]>https://ilyaradchenko.com/users/knownasilya/notes/clqtwop0r0001n3bbjkuuv1mwusers/knownasilya/notes/clqtwop0r0001n3bbjkuuv1mwSun, 31 Dec 2023 19:50:05 GMThttps://ilyaradchenko.com/users/knownasilya/notes/f67ca40busers/knownasilya/notes/f67ca40bSun, 31 Dec 2023 02:00:07 GMThttps://ilyaradchenko.com/users/knownasilya/notes/clvbdfx7s0003f534b831yboausers/knownasilya/notes/clvbdfx7s0003f534b831yboaThu, 25 Jun 2020 00:00:00 GMT