Значения из модели не обновляются до вида

Question

Я отобразил текстовое поле, используя Ember.View. В модели я указал все детали ввода.

App.Display = DS.Model.extend({
inputText: DS.attr('string'),
width: DS.attr('string'),
height: DS.attr('string'),
className: DS.attr('string')
})
App.Display.FIXTURES = [{
id: '1',
innnerText : 'helo',
width: '197px',
height: '25px',
className: 'DisplayClass'
}]

из модели, как я могу добавить className, ширину, высоту и innerText в блок дисплея.

Вот мой displayView

 <script type="text/x-handlebars" data-template-name="_display">
{{#view 'App.DisplayView'}}{{/view}}
 </script>

 App.DisplayView = Ember.View.extend({
tagName: 'input',

});

 App.DisplayController = Ember.ArrayController.extend({
actions: {

}
});

Как заполнить данные модели (т. Е. InnerText, размеры, className) через контроллер для представления. Примечание: я не использую this.resource('somename')

В IndexRoute я установил контроллер

  setupController: function (controller, model) {
    controller.set('model', model);
    this.controllerFor('Display').set('model', model.displayInput);

В IndexRoute

App.IndexRoute = Ember.Route.extend({
model: function(){
    return {
        //findall of model name 
        displayInput : this.store.findAll('display')
 }
 }

Теперь, чтобы использовать модель, чтобы установить и получить значение ввода

Answer 1

Рабочая демонстрация на JS Bin. Вы используете представления - устаревшую функцию сейчас - вместо компонентов, которые делают код не очень красивым, и это не идеальный инструмент для реализации желаемого поведения. Вместо этого я преобразовал ваш подход к использованию компонентов. Кроме того, в Fixtures вы определили innnerText вместо inputText,

Итак, начнем с компонента. Код:

App.DisplayComponentComponent = Ember.Component.extend({
   tagName: 'input',
  attributeBindings: ['style', 'value'],
  style: Ember.computed('model', 'model.{width,height}', function() {
    var ret = '',
        width = this.get('model.width'),
        height = this.get('model.height');

    if (width) {
      ret += 'width: ' + width + ';';
    }

    if (height) {
      ret += 'height: ' + height + ';';
    }

    return ret;
  })
});

Компонент шаблона:

<script type="text/x-handlebars" data-template-name="display-component">
</script>

Затем исправьте светильники:

App.Display.FIXTURES = [{
id: '1',
inputText : 'helo',
width: '197px',
height: '25px',
className: 'DisplayClass'
}];

Там также проблема с вашим model, Я думаю, что будет проще инициализировать модель для контроллера дисплея только в setupController модель.

setupController: function (controller, model) {
    controller.set('model', model);
    this.store.findAll('display').then(function(displays) {
        this.controllerFor('display').set('model', display.get('firstObject'));
    });
}

Затем, если вы хотите использовать это, сделайте это так (я использую ваш пример с _display шаблон, но я понятия не имею, как вы используете это):

<script type="text/x-handlebars" data-template-name="_display">
{{display-component model=model class=model.className value=model.inputText}}
</script>

Я должен предположить, что _display Шаблон для контроллера дисплея, потому что ваш вопрос не совсем понятен.