javascript - 使用 Ractive 在多重选择中设置预选值

Question

我在 Ractive 中渲染了一个选择多个，并计算出所有可能选项的列表，效果非常好。但我找不到预选值的正确方法。

到目前为止，我有类似的东西:

data = [{
  type: "Person",
  Name: "John",
  worksFor: [
    "1",
    "2"
]},{
   type: "department",
   id: "1",
   Name: "Sales"
},{
   type: "department",
   id: "2",
   Name: "Marketing"
},{
   type: "department",
   id: "3",
   Name: "Accounting"
}]
new Ractive({
    el: '#list',
    template: DataTpl,
    data: {myData: data},
    computed: {
        DepartmentList () {
            //some code
            return list_of_all_Departments;
        },
        PersonsList () {
            //some Code
            return list_of_persons
        });

所以在我的模板中我尝试了

{{#PersonsList}}
<select multiple>
    {{#DepartmentList}}
        <option value="{{id}}" 
            {{#if _.includes(PersonsList.worksFor, id)}} selected{{/if}}>{{Name}}
        </option>
    {{/DepartmentList}}
</select>
{{/PersonsList}}

但这只是让我无法计算。有谁知道如何获得这些预选？

Answer 1

这是 Ractive 偏离标准的事情之一。您需要输入 value属性 <select> 。已选<option>的value变成<select>的value 。您将从 <select> 获得的数据类型取决于是否是多个。如果是单选，您将得到一个值。如果是多选，您将得到一个数组。

设置预选值正好相反。将数据中的值分配给 <select>的value并且，假设这些值存在于<option>上s，他们将被选中。不需要模板修改。

Ractive.DEBUG = false;

var data = [{
  type: "Person",
  Name: "John",
  worksFor: [
    "1",
    "2"
  ]
}, {
  type: "department",
  id: "1",
  Name: "Sales"
}, {
  type: "department",
  id: "2",
  Name: "Marketing"
}, {
  type: "department",
  id: "3",
  Name: "Accounting"
}];

new Ractive({
  el: '#list',
  template: '#template',
  data: {
    selectedDepartments: [],
    myData: data
  },
  computed: {
    DepartmentList() {
      return this.get('myData').filter(v => v.type === 'department');
    },
    PersonsList() {
      return this.get('myData').filter(v => v.type === 'Person');
    }
  }
});

<script src="https://unpkg.com/ractive@0.8.11/ractive.min.js"></script>
<div id="list"></div>

<script type="template/ractive" id="template">
  {{#PersonsList}}
    {{ Name }}
  
    <select multiple value="{{ worksFor }}">
      {{#DepartmentList}}
        <option value="{{id}}">{{Name}}</option>
      {{/DepartmentList}}
    </select>
  {{/PersonsList}}
</script>