Help understanding a BF template - SLOTS

Support
1

I’m using a BF template and trying to figure it out.

Here’s a snippet

"slots": [{
                "html": "<div class=\"\">\n\n    <h2 class=\"\">{{row.nameFirst}} {{row.nameLast}}</h2>\n    <a></a>\n\n</div>",
                "slot": "nameBlock"
            }, {
                "html": "<i\n@click=\"namedAction('contactEdit',{ contact:row})\" \nclass=\" fa fa-edit fa-lg\"></i>",
                "slot": "icons"
            }],
            "styleClasses": "col-md-12",
            "type": "table2"

the “row.nameFirst” and “row.nameLast” doesn’t make sense to me when looking at the Development Data Model…

{
    "contacts": [{
        "email": "homersimpson@aol.com",
        "id": "001",
        "nameCompany": "Springfield Power Plant",
        "nameFirst": "Homer",
        "nameLast": "Simpson",
        "phone1": "313-555-1212"
    }, {
        "email": "margesimpson@aol.com",
        "id": "002",
        "nameFirst": "Marge",
        "nameLast": "Simpson",
        "phone1": "313-555-1212"
    }, {
        "email": "ned@leftorium.com",
        "id": "003",
        "nameFirst": "Ned",
        "nameLast": "Flanders",
        "phone1": "313-555-1213"
    }, {
        "email": "maude@leftorium.com",
        "id": "004",
        "nameFirst": "Maude",
        "nameLast": "Flanders",
        "phone1": "313-555-1213"
    }, {
        "email": "cw@sps.com",
        "id": "005",
        "nameFirst": "Clancy",
        "nameLast": "Wiggum",
        "phone1": "313-555-1214"
    }, {
        "email": "ednak@ses.com",
        "id": "006",
        "nameFirst": "Edna",
        "nameLast": "Krabappel",
        "phone1": "313-555-1215"
    }],
    "row": {
        "email": "homersimpson@aol.com",
        "nameCompany": "Springfield Power Plant",
        "nameFirst": "Homer",
        "nameLast": "Simpson",
        "phone1": "313-555-1212"
    }
}

Why is the model NOT pulling from {{contacts.nameFirst}}? In the object “row”, there’s only 1 “record” but when I preview with the development data model activated, the list returns all the contacts values.

I tried substituting with my incoming JSON Array {{model. proceduresAsJSONArray.name}} and also tried {{proceduresAsJSONArray.name}} but nothing rendered.

How, in the dev data model, is there 1 “value” in the “row” JSON Array but yet it’s displaying all the contacts in the development data model?

2

I’ll start this by saying there really shouldn’t be a row object in the Development Data Model. It doesn’t serve a purpose and causes more confusion than anything good. Will note to remove that from the BF Template.

To understand this better, you can think of it similarly to how v-for loops work. If I were to create a table for an array of contacts using a v-for loop, I would write something like v-for="row in model.contacts". This will loop through every element in the model.contacts array, and for every iteration, row will contain a new element of the array.

So if I wanted to show the nameFirst of every row, I can simply do row.nameFirst, since row will eventually represent every element in the contacts array.

This is essentially what a table2 does. It takes an array from the model (contacts) and creates a variable row that will represent every “row” in your table.

This is because contacts is an array. To target something in an array, you must first specify an index to target. {{model.contacts[0].nameFirst}} would return “Homer”, since it is in the first position in the array. This is why row is used instead, as it will eventually contain contacts[0], contacts[1], contacts[2], ... until it reaches the end of the contacts array.