在下拉列表中选择复杂对象并获取附加数据

Question

我使用 jsViews 来构建应用程序。

在某个地方，我有一组复杂的对象。该数组绑定在一个下拉列表中，我可以在其中将标签和值设置为对象的属性。

但是，我还必须获取自定义对象的一些其他属性。

我该怎么做？

现在我有：

(function($) {
  var dataVm = {
    value: null,
    choices: [
      { "label" : "France", "value" : "FR", "icon" : "flag-icon-fr" },
      { "label" : "Germany", "value" : "DE", "icon" : "flag-icon-de" },
      { "label" : "Brazil", "value" : "BR", "icon" : "flag-icon-br" },
      { "label" : "USA", "value" : "US", "icon" : "flag-icon-us" }
    ],
    icon: "flag-icon-fr"
  };

  var helpers = {
    doSelect : function(){
      // Fake business rule, I.E. call a web service to get country data
      var valueFromBusinessLogic = "FR"; 
      $.observable(dataVm).setProperty("value", valueFromBusinessLogic);
    }
  };

  $.templates("#mainTemplate").link("#container", dataVm, helpers);
})(jQuery);

<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>


<script id="mainTemplate" type="text/x-jsrender">
  <p>Selected : <span>{^{:value}}</span></p>
  <p>Flag  : <span data-link="class{:('flag-icon ' + icon)}"></span></p>
  <select data-link='value'>
	{^{for choices}}
   <option value="{{:value}}">{{:label}}</option>
  {{/for}}
	</select>

  <button data-link="{on ~doSelect}">Select from business logic</button>
</script>

<div id="container">

</div>

这按预期工作，但我无法获得 icon 子属性。

我的value 属性很重要，可以通过外部操作（表单初始化或按钮单击）设置。所以我不能（至少我相信），我不能玩#index，因为它会将索引放在 value 属性中。

Answer 1

您需要确定您选择的国家/地区属性是什么 - 它可以是对象、选择数组中的索引或值字符串。但是select的默认绑定是value。

如果您将值字符串保留为选定的国家/地区，则可以定义一个查找助手来返回对象：

function countryFromVal(val) {
  var i = dataVm.choices.length;
  while (i--) {
    if (dataVm.choices[i].value === val) {
      return dataVm.choices[i];
    }
  }
  return dataVm.choices[0];
}

var helpers = {
    countryFromVal: countryFromVal,

然后写

<span data-link="class{:('flag-icon ' + ~countryFromVal(value).icon)}"></span>

或者，您可以将选定的国家/地区属性设为索引，并在此示例中的选择上使用转换器：http://www.jsviews.com/#link-select@selectconvert。

或者你可以让它成为对象本身，再次使用转换器，像这样：

(function($) {
  var dataVm = {
    choices: [
      { "label" : "France", "value" : "FR", "icon" : "flag-icon-fr" },
      { "label" : "Germany", "value" : "DE", "icon" : "flag-icon-de" },
      { "label" : "Brazil", "value" : "BR", "icon" : "flag-icon-br" },
      { "label" : "USA", "value" : "US", "icon" : "flag-icon-us" }
    ]
  };

  dataVm.country = dataVm.choices[1];

  function countryFromVal(val) {
    var i = dataVm.choices.length;
    while (i--) {
      if (dataVm.choices[i].value === val) {
        return dataVm.choices[i];
      }
    }
    return dataVm.choices[0];
  }

  function valFromCountry(country) {
    return country.value;
  }

  $.views.converters({
    fromValue: countryFromVal,
    toValue: valFromCountry
  });

  var helpers = {
    doSelect : function(){
      // Fake business rule, I.E. call a web service to get country data
      var valueFromBusinessLogic = "FR"; 
      $.observable(dataVm).setProperty("country", countryFromVal(valueFromBusinessLogic));
    }
  };

  $.templates("#mainTemplate").link("#container", dataVm, helpers);
})(jQuery);

<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>

<script id="mainTemplate" type="text/x-jsrender">
  <p>Selected : <span>{^{:country^value}}</span></p>
  <p>Flag  : <span data-link="class{:'flag-icon ' + country^icon}"></span></p>

  <select data-link='{toValue:country:fromValue}'>
    {^{for choices}}
      <option value="{{:value}}">{{:label}}</option>
    {{/for}}
  </select>

  <button data-link="{on ~doSelect}">Select from business logic</button>
</script>

<div id="container"></div>

注意语法country^icon - 请参阅http://www.jsviews.com/#linked-paths@deep