Ractive로 복수 선택에서 미리 선택된 값 설정

Question

나는 모든 옵션의 계산 된 목록으로 Ractive에서 select multiple을 렌더링합니다. 이는 효과가 있습니다. 그러나 값을 미리 선택하는 적절한 방법을 찾지 못했습니다.

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

을 시도하지만 그냥 나에게 failed to compute을했다 :

지금까지 내가 좋아하는 뭔가가있다. 그 사전 선택을하는 법을 아는 사람이 있습니까?

Answer 1

이 Ractive이 기준에서 벗어난 것들 중 하나입니다에게 무엇이든에 값을 설정해야합니다. <select>에 value 속성을 입력해야합니다. <option>의 value을 선택하면 <select>의 value이됩니다. <select>에서 얻을 수있는 데이터의 종류는 여러 개인지 여부에 따라 다릅니다. 단일 선택 인 경우 단일 값을 얻습니다. 다중 선택 인 경우 배열이 생성됩니다.

미리 선택된 값을 설정하는 것은 다른 방법입니다. 데이터의 값을 <select>의 value에 할당하고 그 값이 <option>에 있다고 가정하면 해당 값이 선택됩니다. 템플릿 맹 글링이 필요하지 않습니다.

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>

Answer 2

당신은 선택에 값을 지정하여 기본 값