2013-11-21 2 views
0

После завершения Ember's Getting Started Tutorial, я пытаюсь сделать свое первое очень простое приложение, и я уже заблокирован :)Basic уголька привет мир ситуация

Я просто хочу, чтобы сделать простой Hello World:

  • моего HTML содержит текстовый ввод, когда пользователь может ввести свое имя
  • , когда пользователь нажимает кнопку ввода, <div> обновляется с текстом: «Привет, пользователь!».

Вот мой шаблон:

<script type="text/x-handlebars" data-template-name="user"> 
    <form role="form"> 
     <div class="form-group"> 
      <label for="firstname">Firstname</label> 
      {{input type="text" class="form-control" id="new-user" value=newFirstname action="updateMessage"}} 
     </div> 
    </form> 
    <div class="well" id="new-greeting"> 
     {{newGreeting}} 
    </div> 
</script> 

А вот мой контроллер:

Teamtools.UserController = Ember.ArrayController.extend({ 
    newGreeting: "Empty", 
    actions: { 
     updateMessage: function() { 
      var firstname = this.get('newFirstname'); 
      this.newGreeting = "Hello " + firstname; 
     } 
    } 
}); 

При загрузке страницы, поле ввода и "Пустой" появляется сообщение. Большой!

Но когда я набираю имя и затем вхожу, я перенаправляется на пустую страницу /?. Я уверен, что это очень простой материал, но если бы я мог получить помощь, чтобы понять, что здесь происходит, я бы очень признателен.

ps: это может помочь пояснение, я обычно являюсь обычным рубином на Rails-мире.

+1

Я не вижу sayHello Метод внутри действий, который должен находиться внутри UserController, поскольку имя шаблона является «пользователем» –

+0

Спасибо @AbibullahRahamathulah, это была ошибка копирования/вставки, я исправил вопрос. –

ответ

1

Я считаю, что проблема заключается в указании «действия» для элемента ввода - это URL-адрес, по которому вы хотите отправить данные формы, поэтому вам не нужно, так как вам не нужно делать запрос на сервер , Аналогично, для этого вам не нужен хэш-код действий в вашем контроллере.

Эмбер намного умнее, чем вы за это считаете. Вы можете настроить его так, чтобы вам не приходилось обращаться, когда что-либо изменяется, так как оно будет делать это автоматически. Что вам нужно сделать, это что-то вроде этого:

Teamtools.UserController = Ember.ArrayController.extend({ 
    newGreeting: function() { 
     var firstName = this.get("newFirstName"); 
     var greeting = "Empty"; 

     if (firstName.length !== 0) 
     { 
      greeting = "Hello " + firstName; 
     } 

     return greeting; 
    }.property("newFirstName") 
}); 

Свойства («newFirstName») в конце метода newGreeting важно: он говорит, что Ember newGreeting может быть оценен, чтобы дать свойство (а вычисленное свойство), которое может отображаться в представлении. Аргумент newFirstName указывает Ember, что это значение должно быть пересчитано при изменении newFirstName.

Отказ от ответственности: Я не тестировал этот код, но это должно быть что-то вроде того, что вы после ...

+0

Спасибо. Ваше решение работает нормально, но оно пропускает 2 балла: оно работает так, как будто я мог сделать это только с помощью jQuery. Я действительно хотел использовать здесь поведение MVC (хотя, правда, не было модели), чтобы расширить свое понимание того, как работает Ember. Кроме того, есть ли что-то похожее на свойство(), которое запускается только тогда, когда пользовательский тип возвращает (вместо каждого введенного ключа)? –

+1

Я не совсем уверен, что вы имеете в виду, что ваша точка зрения заключается в использовании поведения MVC - с уровнем этого примера, похоже, это не что-то большее, чем вычисляемое свойство, возвращаемое контроллером. Что касается этого, возможно, в JQuery, так много всего. Эмбер просто по-другому. Вместо использования определенного свойства newFirstName у вас может быть модель с свойством firstName и привязка ее к текстовому вводу, в противном случае вы не можете сделать больше - Ember имеет довольно конкретные способы поддержки некоторых ситуаций и так оно и есть. –

+0

Что касается обновления только при нажатии на возврат, вам нужно сделать что-то вроде вашего исходного кода, но вместо этого {{action updateMessage on = "submit"}} в элементе формы. Ваш метод updateMessage должен будет вернуться в хэш элементов действий, как и изначально. –

0

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