Binding and accessing nested elements using Rivets.js and Backbone deep model

Question

We are using an open source FormBuilder client side component and extending it to fit our requirements. Formbuilder is written using Backbone Deep model with nested data and for binding, it use Rivets.js.

Here Formbuilder is on GitHub: https://github.com/dobtco/formbuilder and here backbone deep model at GitHub: https://github.com/powmedia/backbone-deep-model

Now we are using nested elements in view, which are nested in structure as in following JSON:

{
    "fields": [{
        "label": "Untitled",
        "field_type": "checkboxes",
        "required": true,
        "field_options": {
            "options": [{
                "label": "test",
                "checked": false
            }, {
                "label": "",
                "checked": false
            }]
        },
        "rules_data": {
            "rules": [{
                "ruleId": "rule6",
                "criterias": [{
                    "condition": "if",
                    "responseTo": "",
                    "userOption": ""
                }],
                "branchTo": [{
                    "branch": "test"
                }, {
                    "branch": ""
                }, {
                    "branch": ""
                }]
            }]
        },
        "cid": "c2"
    }]
}

Here there is array of rules, then rules have at every index have more data with in which one is branchTo, now branchTo is also an indexed array. In Rivets.js we can bind something using Rivets.js . or : operator. In case of properties, we can use : but we are unable to access elements inside nested indexed array.

So is it possible to access and bind elements in Rivets while using nexted indexed elements? If yes, then how can we do so? Or is there better and simpler way to accomplish same goal? I am beginner in Backbone as well as Rivets, and I am not sure if this is the right way.

Answer 1

If I understand rivetsjs correctly the : is just an example of an adapter you could have ^ as an adapter separator if you wish. This means you can also have both and nest adapters. having the : search the first level and then the ^ to search 1 level deeper.

You can also build a more adaptive adapter that can get objects deeper. Example in the following stackoverflow answer. You can also see some other methods of getting deeper nested objects here:

How to bind deeper than one level with rivets.js

Hope this solves your problems