【问题标题】:Dynamic Independent Title for Each Object in Array数组中每个对象的动态独立标题
【发布时间】:2017-06-20 17:02:18
【问题描述】:

在创建 alpaca 表格的过程中,我遇到了一种情况,我不确定如何进行。

这是我正在使用的架构的表示:

$("#samplediv").alpaca({
  "schema": {
    "description": "My Favorite Ice Creams",
    "type": "array",
    "items": {
        "title": "Ice Cream",
        "type": "object",
        "properties": {
            "flavor": {
                "title": "Flavor",
                "description": "Ice cream flavor",
                "type": "string"
            },
            "topping": {
                "title": "Topping",
                "description": "Ice cream topping",
                "type": "string"
            }
        }
    }
  }
});

呈现的架构如下所示:

我有一个由文本字段组成的对象数组。我的目标是根据对象包含的数据为数组中的每个对象创建一个动态且独立的标题。在示例情况下,这可能是将第一个对象的“冰淇淋”标题替换为“香草”,第二个对象替换为“巧克力”。

我尝试使用 postRender 回调来根据当前字段数据设置数组容器中每个对象的标题属性,但我似乎无法获取要更新的文本。

【问题讨论】:

    标签: javascript alpacajs


    【解决方案1】:

    您可以通过一些技巧来实现这一点,但默认情况下,数组类型的字段通常对创建的每个项目使用相同的标题。您需要做的是在更改 Flavor 字段后更改标题,这将通过在该字段中使用更改事件来完成。

    "flavor": {
          "events": {
            "change": function() {
              changeItemLabel(this.parent, this.getValue());
            }
          }
        }
    

    这可以解决问题,但所有新创建的项目都将具有相同的更新标题!所以想到的想法是使用一种默认标签并覆盖新创建项目的更新标题。

    这是一个 fiddle 演示此案例。 我希望这对您有所帮助,但如果这不是您要找的,请告诉我。

    【讨论】:

    • 解决了动态标题的问题!是否可以使这些标题可单击以折叠每个对象?我已尝试成功添加折叠数据切换,但我正在寻找更清洁的解决方案! (为什么对象不像其他容器对象那样可折叠?)
    • 为了使折叠功能起作用,有一个激活它的选项,我试过了,但没有用...我可能今天下班后再试一次。
    【解决方案2】:

    不幸的是,Alpacajs 文档非常混乱,并且没有描述一些功能。有几个例子根本不起作用。因此,您必须深入研究源代码才能弄清楚它是如何工作的。 :(

    要启用折叠,您必须将代码放在选项的“项目”部分内,如下所示:

    "options": {
        "myfield": {
            "toolbarSticky": true,
            "toolbarPosition": "bottom",
            "type": "array",
            "items": {
                "collapsible": true,
                "fields": {
                }
            }
        }
    }
    

    【讨论】:

      猜你喜欢
      • 2021-10-27
      • 2014-12-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-12-21
      • 2023-01-20
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多