基本燼你好世界形勢

完成Ember's Getting Started Tutorial後，我試圖讓我的第一個非常基本的應用程序，我已經封鎖:)基本燼你好世界形勢

我只想做一個簡單的Hello World：

我當用戶輸入他的名字時，HTML包含文本輸入
當用戶按下輸入時，<div>用文本更新：「Hello user！」。

這裏是我的模板：

<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：它可以幫助解釋，我更多的是Ruby on Rails世界。

來源

2013-11-21 Dirty Henry

我沒有看到sayHello方法裏面的行動應該在UserController裏面，因爲模板名稱是'user' –

謝謝@AbibullahRahamathulah，那是一個複製/粘貼錯誤，我已經解決了這個問題。 –

我認爲問題在於爲輸入元素指定了一個「操作」 - 這是您要發送表單數據的URL，因此您不需要這樣做，因爲您不需要發出服務器請求。同樣，你不需要在你的控制器中爲這個操作散列。

Ember比你賦予它更多的智慧。您可以對其進行設置，以便在發生任何變化時無需處理，因爲它會自動執行。什麼你需要做的是這樣的：

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") 
});

在newGreeting方法末尾的屬性（「newFirstName」）是很重要的：它告訴灰燼是newGreeting可以評估給一個屬性（一計算屬性），可以在視圖中顯示。「newFirstName」參數告訴Ember，只要newFirstName發生更改，就應該重新計算這個值。

免責聲明：我沒有實際測試此代碼，但它應該像你以後......

來源

2013-11-21 11:35:23

謝謝。你的解決方案工作正常，但它錯過了2點：它的工作原理就像我可以用jQuery完成。我的觀點是真的在這裏使用MVC行爲（即使沒有模型），以擴展我對Ember工作原理的理解。此外，是否有類似於property（），只有當用戶鍵入返回（而不是每個鍵入的鍵）時觸發？ –

我不太清楚你的意思是使用MVC行爲 - 這個例子的級別似乎沒有比控制器返回的計算屬性更多。關於這在JQuery中是可能的，許多事情也是如此。 Ember只是一種不同的方式。與其使用特定的newFirstName屬性，您可以使用firstName屬性創建一個模型並將其綁定到文本輸入，否則沒有太多可以做的事情 - Ember傾向於具有相當特定的方式來支持某些情況，這是它支持這個的方式。 –

關於僅在按下返回時進行更新，您需要執行類似於原始代碼的操作，但需要在表單元素中使用{{action updateMessage on =「submit」}}。您的updateMessage方法需要返回到最初的操作哈希。 –

返回從你的行動false，所以它不會滲透。要進行索引的導航發生在可響應該動作的控制器/路由鏈的更上方。

來源

2013-11-21 16:59:29

基本燼你好世界形勢

回答

相關問題