How to access observable inside observable list

How-to Discussions
1

I have a form that is generated inside each tag. It is based on the following data:

var vehicles = [
    {
		id: 1,
		type: "MPV",
		make: "Toyota",
		model: "Vellfire"
	},
	{
		id: 2,
		type: "Sedan",
		make: "Honda",
		model: "Civic"
	},
	{
		id: 3,
		type: "Coupe",
		make: "Mercedes",
		model: "C-Class"
	}
};

module.exports = {
	vehicles: vehicles
}

The following is roughly what I have to display the form:

<Each Items="{vehicles}">
	<DockPanel>
		<DockPanel Dock="Top">
			<Panel HitTestMode="LocalBoundsAndChildren" Padding="0,8,0,8">
				<mob.RegularLabel Value="{type}" TextOffset="0" />
				<Clicked>
					<RaiseUserEvent TargetNode="checkBtn" EventName="OnClick" />
				</Clicked>
			</Panel>
			<Panel Margin="0,0,0,0" MinWidth="56" Dock="Right">
				<mob.CheckButton ux:Name="checkBtn" Id="{id}" Dock="Right" Padding="0,0,0,0">
					<WhileSelected>
						<Change detail.Visibility="Visible" Duration="0.3" Easing="QuadraticIn" />
					</WhileSelected>
				</mob.CheckButton>
			</Panel>
		</DockPanel>

		<StackPanel ux:Name="detail" Visibility="Collapsed" Color="#fafafa">

			<DockPanel>
				<mob.InputRow Dock="Left"/>
				<mob.InputRow Dock="Left">
					<mob.MDTextInput Id="first" Value="{type}" />
					<mob.RegularLabel ux:Name="vehicleType" Value="Vehicle Type"/>
				</mob.InputRow>
				<mob.InputRow Dock="Right"/>
			</DockPanel>

			<DockPanel>
				<mob.InputRow Dock="Left"/>
				<mob.InputRow Dock="Left">
					<mob.MDTextInput Id="first" Value="{make}" />
					<mob.RegularLabel ux:Name="vehicleType" Value="Vehicle Type"/>
				</mob.InputRow>
				<mob.InputRow Dock="Right"/>
			</DockPanel>
			
			<DockPanel>
				<mob.InputRow Dock="Left"/>
				<mob.InputRow Dock="Left">
					<mob.MDTextInput Id="first" Value="{model}" />
					<mob.RegularLabel ux:Name="vehicleType" Value="Vehicle Type"/>
				</mob.InputRow>
				<mob.InputRow Dock="Right"/>
			</DockPanel>
			
		</StackPanel>
	</DockPanel>
</Each>
<mob.Button Text="SAVE">
	<Clicked>
		<Callback Handler="{save}" />
	</Clicked>
</mob.Button>

The form behaves as expected (every time I click on the check box, it will toggle the detail form underneath an item).
My issue is when I want to save, how do I get the data entered inside each form because there’s no explicit observable defined for each form entry. Is there a way to retrieve the entered values?

2

No, currently you need to define an explicit observable for each field that can be edited. Then the values will be updated right inside of of your JS data, and you can iterate over the list to get whatever the new values of items are.