使用Rivets.js和Backbone深度模型绑定和访问嵌套元素

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

本文关键字:访问 绑定 嵌套 元素 模型 深度 Rivets js Backbone 使用      更新时间:2023-09-26

我们正在使用一个开源的FormBuilder客户端组件,并对其进行扩展以满足我们的需求。Formbuilder是使用Backbone Deep model编写的,使用嵌套数据,绑定时使用Rivets.js。

这里Formbuilder是在GitHub: https://github.com/dobtco/formbuilder和这里backbone deep model在GitHub: https://github.com/powmedia/backbone-deep-model

现在我们在视图中使用嵌套元素,它们嵌套在结构中,如下面的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"
    }]
}

这里有一个规则数组,然后每个索引上的规则都有更多的数据,其中一个是branchTo,现在branchTo也是一个索引数组。在Rivets.js中,我们可以使用Rivets.js .:操作符绑定一些东西。对于属性,我们可以使用:,但是我们不能访问嵌套索引数组中的元素。

所以有可能访问和绑定铆钉元素,而使用下一个索引元素?如果是,我们该怎么做?或者是否有更好更简单的方法来实现同样的目标?我是骨干和铆钉的初学者,我不确定这是否是正确的方式。

如果我正确理解rivetsjs, :只是适配器的一个例子,如果你愿意,你可以将^作为适配器分隔符。这意味着您还可以同时拥有和嵌套适配器。让:搜索第一层,然后让^搜索更深一层。

您还可以构建一个更具适应性的适配器,它可以获得更深入的对象。下面的例子是stackoverflow答案。您还可以在这里看到获得更深嵌套对象的其他方法:

如何使用铆钉绑定一个以上的层次。js

希望这能解决你的问题