2015-04-16 4 views
0

Я пытаюсь получить простое родство с отношениями с элементом выбора HTML.Проблема с ember select

Мое приложение записывает студентов. Каждому ученику присваивается категория.

У меня есть категория модели:

import DS from "ember-data"; 

export default DS.Model.extend({ 
    code: DS.attr('string'), 
    description: DS.attr('string') 
}); 

и модель студента, который - среди многих других вещей, - принадлежит к категории.

import DS from "ember-data"; 

export default DS.Model.extend({ 
    //... 
    category: DS.belongsTo('category', {async: true}), 
    //... 
}); 

Я хочу, чтобы позволить пользователю выбрать категорию студентов в шаблоне так мой маршрут грузов в списке категории объектов:

import Ember from "ember"; 

export default Ember.Route.extend({ 
    model: function(params) { 
    return this.store.find('student', params.student_id); 
    }, 
    setupController: function(controller, model) { 
    this._super(controller, model); 
    //... 
    controller.set('categories', this.store.find('category')); 
    //... 
    } 
}); 

Мой шаблон включает в себя это (Edit: Я использую "content.id" для путь значение не "content" как первоначально указано, но, кажется, не имеют никакого влияния на проблемы):

<label>Category:&nbsp;</label> 
{{view "select" 
    content=categories 
    optionValuePath="content.id" 
    optionLabelPath="content.description" 
    selection=category}} 

Мои ожидания - это то, что это позволит мне выбрать элемент из списка, и он соответствующим образом обновит мою модель.

Что происходит на самом деле заключается в том, что список работает, но если я изменю выбор, элемент select станет пустым.

Результирующий HTML выглядит так:

<select id="ember955" class="ember-view ember-select"> 
    <option id="ember1199" class="ember-view" value="16">Category A</option> 
    <option id="ember1202" class="ember-view" value="17">Category B</option> 
    <option id="ember1205" class="ember-view" value="18">Category C</option> 
    <option id="ember1208" class="ember-view" value="19">Category D</option> 
    <option id="ember1211" class="ember-view" value="20">Category E</option> 
    <option id="ember1214" class="ember-view" value="21">Category F</option> 
    <option id="ember1217" class="ember-view" value="22">Category G</option> 
</select> 

Я сделал это правильно? Есть ли у меня образец?

EDIT:

Я копировал это как лучше всего, как я могу в jsbin, но проблема у меня не происходит. Его очень странно, элемент select заполнен правильно, и даже кажется, что он правильно обновляет категорию. Единственная проблема заключается в том, что если я изменю исходный выбор, то поле выбора будет пустым.

+0

так, вы ожидаете, что, выбрав категорию будет назначена пользователю?. не могли бы вы создать JS Fiddle? – fanta

+0

emberjs.jsbin.com – sunrize920

ответ

1

Я ожидаю увидеть уникальное свойство, такое как id, ссылка на optionValuePath вместо всего объекта.

Таким образом, вместо optionValuePath="content" было бы optionValuePath="content.id":

<label>Category:&nbsp;</label> 
{{view "select" 
    content=categories 
    optionValuePath="content.id" 
    optionLabelPath="content.description" 
    selection=category}} 
+0

Это не должно вызывать проблемы ... Постановка 'content' совершенно верна, поскольку он будет устанавливать выбранный объект, а не только его id – nem035

+0

^Правильно? 'optionValuePath' используется для установки атрибута' value' соответствующего тега 'option'. Установка этого объекта 'object' не имеет смысла. –

+0

, когда я устанавливаю его в объект, он просто помещает строковое представление объекта в HTML, например 'value =" "'. Это похоже на поведение по умолчанию и прекрасно работает. Использование object.id приводит к более чистому HTML. Я играл с этим, поэтому мой оригинальный примерный код не соответствует выходному примеру. Теперь это исправлено. –

Смежные вопросы