Emberjs рассчитывает на основе ввода формы и отображает ответ

Суперкодирование n00b здесь. Я пытаюсь создать калькулятор питания в emberjs. Если у меня есть форма ввода пользователя, как показано ниже, где мне написать функцию расчета и как отобразить ответ?

    <form>
      <div class="form-group">
        <label for="weight">Weight</label>
        {{input type="text" id="weight" class="form-control" value=weight}}
      </div>
      <div class="form-group">
        <label for="runduration">How long will you be running? (hours)</label>
        {{input type="text" id="runduration" class="form-control" value=runduration}}
      </div>
      <div class="form-group">
        <label for="cycleduration">How long will you be cycling?</label>
        {{input type="text" id="cycleduration" class="form-control" value=cycleduration}}
      </div>
      <button {{action calculate}}>Calculate nutrition</button>
    </form>

Буду ли я писать функцию в контроллере?

В моем маршрутизаторе у меня есть следующее, но я бы предпочел просто сохранить форму ввода и отображаемый расчет на том же шаблоне Nutritioncalc.hbs

  this.route('nutritioncalc');
  this.resource('new-nutritioncalc', { path: '/nutritioncalc/new' });

Спасибо.


ember.js ember-cli
person user3574779    schedule 05.06.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ember заполняет эти value=variable данными внутри поля ввода. Вы можете получить к ним доступ в своем NewNutritioncalcController.

App.NewNutritioncalcController = Ember.ObjectController.extend({
  actions: {
    calculate: function(){
      var weight = this.get('weight'),
          runduration = this.get('runduration'),
          cycleduration = this.get('cycleduration');
    }
  }
});

Действие

Действия распространяются от связанного контроллера к цепочке маршрутов.

Документация

Вот документация по всплывающим окнам.

Если контроллер не реализует метод с тем же именем, что и у действия, в своем объекте действий, действие будет отправлено на маршрутизатор, где текущий активный конечный маршрут получит возможность обработать действие.

Двусторонняя привязка

Вот запись в блоге о двухсторонней привязке данных в Ember.

Независимо от того, изменяете ли вы свойство в своем шаблоне (например, вводя текстовое поле) или в javascript (например, нажимая кнопку), в обоих случаях изменение отражается во всех местах, где используется свойство или переменная. .

person Pooyan Khosravi    schedule 05.06.2014