uc- select2标签中的单词

Question

我在hbs文件中有一个select-2标记，我在其中填充服务调用的结果。该服务返回所有大写字母的结果，我必须将其更改为驼峰大小写。以前我使用简单的select html标签，因此可以使用uc-word helper来实现这一点。

    <select onchange={{action "doSomething" value="target.value"}}>
        <option value="">Any</option>
        {{#each fruits as |fruit|}}
                <option value={{fruit.id}}>{{uc-words fruit.value force=true}}</option>
        {{/each}}
    </select>

现在更改为选择-2\f25 hbs -2\f6标签

    {{select-2
        content=fruits 
        optionLabelPath="value" searchEnabled=false
        optionValuePath="id"
        value=selectedFruit
        placeholder="Any"
        allowclear=true
    }}

我有没有办法把这个也改成驼峰大小写？

另外，我可以在不修改结果的情况下拥有一个空选项吗？

Answer 1

根据您的时间框架，以及您想要的解决方案的优雅程度，您有几个选择。

如果您希望快速完成工作，只需查看uc-words helper source，您就可以将该函数复制到您的utils目录中。

然后，在您的服务中，在填充适当的属性之前，只需使用上面链接的函数转换一组水果值。

根据您的用例复制和调整的函数：

// utils/helpers.js
export function ucWords(word, options) {
  var string =  String(word),
    force = (options.force === true) ? true : false;

  if(force) {
    string = string.toLowerCase();
  }

  return string.replace(/^([a-z\u00E0-\u00FC])|\s+([a-z\u00E0-\u00FC])/g, function($1) {
    return $1.toUpperCase();
  });
}

// services/populate.js
//..
import { ucWords } from 'utils/helpers.js'

export default Service.extend({

  fruitStore: service(),

  upperCaseFruit: Ember.computed('fruitStore.fruits', function(){
    return this.get('fruitStore.fruits').map(fruit => {
        fruit.value = ucWords(fruit.value);
        return fruit;
    });
  })

})