Question

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

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

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

我该怎么做？

现在我有：

＆＃13;

(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);

＆＃13;

<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>

＆＃13;

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

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

Answer 1

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

如果将值字符串保留为选定国家/地区，则可以定义查找帮助程序以返回对象：

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

在下拉列表中选择一个复杂对象并获取其他数据

1 个答案: