是否可以将数组用作 jsrender 帮助函数的参数?

Is it possible to use an array as a parameter to a jsrender helper function?

提问人:vseavello 提问时间:8/1/2023 最后编辑:SNBSvseavello 更新时间:8/2/2023 访问量:51

问:

我有一些 javascript 代码,用于通过匹配这些相同对象中的标识属性值来从对象数组中检索属性值。

plantArray.find(p => p.PlantCode.toUpperCase() == code.toUpperCase()).PlantName;

我想在辅助函数中使用它,这样我就可以在渲染模板时使用它。

function plantNameFromCode(code, plantArray) {
  if (plantArray)
  {
    if (typeof plantArray == "string")
      return plantArray;

    plantname = plantArray.find(p => p.PlantCode.toUpperCase() == code.toUpperCase()).PlantName;
    return plantname;
  }
  else
  {
    return code;
  }
}

$.views.helpers({
  plantNameFromCode: plantNameFromCode
});

模板如下所示:

<script id="test-plantnamefromcode-template" type="text/x-jsrender">
  {{!-- selectedplants is an array of plant codes --}}
  {{for selectedplants itemVar="~plant"}}
    Plant Code: {{:~plant}}<BR>
    Plant Test: {{:~plantNameFromCode(~plant, "TEST")}}<BR>
    Plant Name: {{:~plantNameFromCode(~plant, plantlist)}}<BR>
  {{/for}}
</script>

数据如下所示:

var data = {
  selectedplants: ["PlantCode2", "PlantCode4"],
  plantlist: [
    {
      PlantCode: 'PlantCode1',
      PlantName: 'Plant Name 1'
    },
    {
      PlantCode: 'PlantCode2',
      PlantName: 'Plant Name 2'
    },
    {
      PlantCode: 'PlantCode3',
      PlantName: 'Plant Name 3'
    },
    {
      PlantCode: 'PlantCode4',
      PlantName: 'Plant Name 4'
    },
    {
      PlantCode: 'PlantCode5',
      PlantName: 'Plant Name 5'
    },
    {
      PlantCode: 'PlantCode6',
      PlantName: 'Plant Name 6'
    },
  ]
};

我以这种方式呈现模板:

var template = $.templates("#test-plantnamefromcode-template");
html = template.render(data);
$("#main").html(html);

当在渲染期间使用数组作为第二个参数调用函数时,辅助函数参数 plantArray 是未定义的。我想知道是否可以以这种方式将数组传递给帮助程序函数。

我尝试以多种方式从模板中传递数组。我用过 、 、 和 。这些格式似乎都没有将数组传递到帮助程序函数中~plantlist:~plantlist:plantlistplantlist

如果我传入一个字符串变量,则帮助程序函数会看到它,如模板定义的 TEST 行所示。

在提供数组作为参数时,有没有办法需要引用数组?是否允许数组作为辅助函数的参数?

JavaScript 数组 模板 帮助程序 JSDender

评论


答:

0赞 BorisMoore 8/2/2023 #1

是的,您可以将数组传递给帮助函数。

您在这里的问题是,您实际上并没有传递一个数组,而是一个属性。undefined

解释一下:您有一个视图层次结构,父视图将您的对象作为数据上下文,具有属性和 .您正在迭代 .在子视图中,数据上下文现在是选定的工厂,它没有属性 - 因此您将未定义的属性传递给帮助程序。dataselectedplantsplantlistselectedplantsplantlist

相反,您需要访问父数据并传递父数据对象的属性。plantlist

有很多方法可以做到这一点,请参阅访问父数据。一种方法是创建一个上下文参数:~plantlist=plantlist

{{for selectedplants itemVar="~plant" ~plantlist=plantlist}}
    Plant Code: {{:~plant}}<BR>
    Plant Name: {{:~plantNameFromCode(~plant, ~plantlist)}}<BR>
{{/for}}

顺便说一句,在这种情况下,您不需要创建 itemVar,因为该对象是子视图中的当前数据上下文,您可以直接将其作为 访问。所以你可以简单地写:~plant~plant#data

{{for selectedplants ~plantlist=plantlist}}
    Plant Code: {{:#data}}<BR>
    Plant Name: {{:~plantNameFromCode(#data, ~plantlist)}}<BR>
{{/for}}