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

Question

我正在使用 JSViews、Observables 和 TypeScript 开发项目。我计划处理多种语言，所以我有一个包含法语和英语版本的对象。具有静态方法的 class returns 名称集合和包含所有静态对象的数组。

我想在带有转换器的下拉列表中显示对象以获取英文名称，我设法填充下拉列表并对更改做出反应，但我无法在下拉列表中显示当前项目而且我没有看看缺少什么。

你能帮忙吗？我在这里做了一个 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);

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

非常感谢，克劳德

Answer 1

看看Data-linked <select> elements - including the section <select> with converters。

您的代码：

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

不正确。您需要数据-link 到 activeHarbor。如果 activeHarbor 是一个字符串，您可以使用 data-link：

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

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

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

<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() 中，如果它需要异步)，然后分配 depends:

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

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

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

Complex object in a dropdown using JSViews

jsfiddle

jsrender

jsviews