使用 JSViews 的下拉列表中的复杂对象答案

【问题标题】：Complex object in a dropdown using JSViews使用 JSViews 的下拉列表中的复杂对象
【发布时间】：2017-11-21 22:05:50
【问题描述】：

我正在使用 JSViews、Observables 和 TypeScript 进行项目。我计划处理几种语言，所以我有一个包含法语和英语版本的对象。具有静态方法的类，它返回名称集合和包含所有静态对象的数组。

我想用转换器在下拉列表中显示对象以获取英文名称，我设法填充下拉列表并对更改做出反应，但我无法在下拉列表中显示当前项目，我看不到什么不见了。

你能帮忙吗？我在这里制作了一个 javascript 示例： https://jsfiddle.net/ClaudeVernier/v093uqg0/

var data = new dataModel();
    for (var member in Harbors) {
  if (typeof Harbors[member] == "object" && Harbors[member].name) {
    data.harbors.push(Harbors[member]);
  }
}

var myTmpl = $.templates("#harborTmpl");
myTmpl.link("#container", data);
    $.observe(data, "*", myHandler);

然后，我需要弄清楚如何通过单击按钮来更改语言，如果您对此有所了解...这将有所帮助:-)

非常感谢，克劳德

【问题讨论】：

标签： jsfiddle jsrender jsviews

【解决方案1】：

看看Data-linked <select> elements - 包括<select> with converters部分。

您的代码：

<select id="cboHarbor" data-link="{{getName:activeHarbor}}">

不正确。您需要数据链接到 activeHarbor。如果 activeHarbor 是一个字符串，您可以使用以下方式进行数据链接：

<select id="cboHarbor" data-link="activeHarbor">

但由于它是一个对象，因此您需要为每个港口对象提供某种字符串值属性，然后您可以将其用于每个选项值。然后，您将使用转换器在 activeHarbor 对象及其字符串值属性之间来回转换，以实现数据链接绑定行为。

例如，您可以使用当前语言中的名称作为字符串值，但是使用根据当前语言而变化的值有点奇怪。但是您需要一个getHarbor 转换器来转换回从名称到港口对象的获取。看起来像这样：

<select id="cboHarbor" data-link="{getName:activeHarbor:getHarbor}">
  {^{for harbors}}
    <option data-link="{getName:}"></option>
  {{/for}}
</select>

或者，您可以使用数组中港口的索引，如下所示：

<select id="cboHarbor" data-link="{getIndex:activeHarbor:getHarbor}">
  {^{for harbors}}
    <option value="{{:#index}}" data-link="{getName:}"></option>
  {{/for}}
</select>

使用如下转换器：

$.views.converters({
  getIndex: function (harbor) {
    return harbor.index;
  },
  getHarbor: function (index) {
    return data.harbors[index];
  },
  getName: function (harbor) {
    return harbor.name[data.languages[data.currentLanguage]];
  }
});

如果您希望能够动态更改语言并让 Harbors 下拉菜单切换到新语言，则必须使您的 getName 转换器依赖于当前语言，如下所示：

$.views.converters.getName.depends = [data, "currentLanguage"];

这是一个 updated version of your jsfiddle 完整的语言下拉菜单以切换语言。

更新：

关于getName 的depends，modified jsFiddle 有这个：

function getName(harbor) {
  return harbor.name[data.languages[data.currentLanguage]];
}

$.views.converters({
  getName: getName,
  ...
});

getName.depends = [data, "currentLanguage"];

因此，您可以简单地使用 getName 函数作为转换器函数，然后在您可以访问数据实例的上下文中（如果需要异步，则在 done() 中），然后分配取决于：

getName.depends = [data, "currentLanguage"];

无需使用$.views.converters.getName.depends

【讨论】：