How to load a md-select based on a different md-select option(binding issue)

Question

Hello i am very new to aurelia js, i have a binding issue that i am stuck with, I have two md-select drop downs on a page, when the form loads it populates a list of Shops, which works correctly as bellow

    <select md-select="label:Shop" value.two-way="addShopProfile.shopId" change.delegate="getItems(addShopProfile.shopId)">
   <option value="" disabled selected>Please select</option>
    <option repeat.for="shop of shops" value.bind="shop.id">${shop.name}</option>
    </select>

You can see i have a change.delegate="getItems(addShopProfile.shopId)"> cause i want the bellow drop down to load the items for a shop based on the shop id

<select md-select="label: Items" if.bind="addShopProfile.shopId" value.two-way="addShopProfile.ItemsId">
   <option value="" disabled selected>Please select</option>
   <option repeat.for="item of Items" value.bind="item.id">${item.name}</option>
   </select>

Now the items load ONLY when i click on the select option to change the Shop(which is correct). If the shop loads on the form the item for that shop does not show unless i go click on it.

How do i bind the items select option to load instantly when their is a shop already loaded instead of having to click the shop select option to change it on first appearance

Answer 1

What i normally do to get rid of this kind of issue is i call my function (in your case) its getItems(addShopProfile.shopId) inside my attached function that Aurelia provides us. ie

attached()
{
getItem(id here)
}

So once dom is loaded your select field will get loaded too with data against your provided id.