Here are some further notes and a possible solution.
The problem you are running into with all your individuals showin up in each house is a problem with Skuid right now. Context conditions are not available for Decks. So you cannot filter rows from a model that should fit within a particular parent deck. This is one of the corners of the mobile components that needs to be swept out…
But… There is another way to approach this. You can add your clients as children relationship fields in your homes model and then use a template component to show the repeating data. I built this out using accounts and contacts and below is a step by step process. (Bonus - link to XML at the end!)
Step 1. Add children to your model.
Unfortunatly the mobile builder does not facilitate adding child relationship data to models, so you have to go into the xml. I usually build a similar model in the desktop builder and then copy the xml into the mobile page. Here is the xml section that I copied:
I added contact name, image and attachment id. I also created a condition such that contacts with no picture would not show in the list.
Step 2. Build an Account Deck and add a template field.
I added a deck to my page and used the “card properties” to show the Account name in the header of each card.
Step 3. Add a template component to the deck.
We can use merge syntax to repeat over all the records in the child relationship section of the model. The syntax is as follows:
{{#Contacts.records}}{{Children Merge Fields {{/Contacts.records}}
In my case I used the following template code:
Contacts
{{#Contacts.records}}<div class="imageBlock"><img src="/servlet/servlet.FileDownload?file={{{Image__r.skuid__AttachmentId__c}}}" width="100%"> <div>{{Name}}</div></div>{{/Contacts.records}}
This puts a “Contacts” title above a set of repeating divs that show the contact’s image and name.
Step 3. Add some CSS to get things looking sweet.
You will notice that I gave a class name to the div. This allows me to define CSS in the resources tab. I did just the bare minimum, but you could take this further.
.imageBlock { display:inline-block;
width:100px;
vertical-align:top;
margin: 2px;
}
This adds some responsive features, keeps image size consistent and adds a little bit of white space around each item.
Step 4. Enjoy the result.
Use this xml file to make this your own. https://github.com/skuidify/SamplePages/blob/master/pages/Account_Contact_ImageWall.xml