如何在ember中綁定js輸入值？

Question

我有灰燼組件，它具有一個HTML輸入框一樣，

<script type="text/x-handlebars" data-template-name="components/top-bar"> 
    <input type="text" placeholder="Search" id="searchbox" value="Search"> 
</script> 

從我的分量，我觸發操作，而輸入搜索框的值一樣，

App.TopBarComponent = Ember.Component.extend({ 

    keyUp: function (event) { 
     var self = this; 
     if (event.keyCode == 13) { 
     var search_text = $('#searchbox').val(); //No I18N 
     self.sendAction('searchEnterAction', search_text); //No I18N 
     } 
    } 
}); 

我有在mixin中的一個動作。在那個行動中，我只是做過渡到另一條路線。

這樣，

searchEnterAction: function (search_text) { 
    var self = this; 
    self.transitionTo('search', search_text); 
} 

在我Router.js，

this.resource('search', {path: '/:search_value'}); //No I18N 

我有作爲參數傳遞給這條路線的動態值。

當我從該輸入框輸入時，該輸入值將設置爲該路線的動態值。

但是，當我使用相同的路由值刷新該頁面時，該輸入值沒有綁定動態路由值。我需要將該輸入框的值與該路由中的值綁定。

如何將html輸入值與ember動態路由綁定？請幫我解決這個問題。

我在分享jsbin鏈接以供參考。

過渡階段（Before Refresh）

刷新頁面（After Refresh）後

JSBIN

Answer 1

Here is the working demo.

您需要在控制器上聲明一個將保存搜索文本的屬性。

App.ApplicationController = Em.Controller.extend({ 
    searchInput: '' 
}); 

將searchInput值綁定到您的組件屬性。 組件呈現時，使用組件屬性更新搜索輸入值。另外，在組件中添加一個觀察者到searchText。當控制器中的searchInput更改時，此觀察者將更新其值。使用這個觀察者來更新輸入框值。當通過url將搜索文本設置爲控制器時，將使用此選項。

{{top-bar searchEnterAction='searchEnterAction' searchText=searchInput}} 

App.SearchRoute = Em.Route.extend({ 
    model: function(params) { 
    this.controllerFor('application').set('searchInput', params.search_value); 
    } 
}); 

App.TopBarComponent = Ember.Component.extend({ 

    searchText: '', 

    setup:function() { 
    $('#searchbox').val(this.get('searchText')); 
    }.on('didInsertElement'), 

    updateValue:function() { 
    $('#searchbox').val(this.get('searchText')); 
    }.observes('searchText'), 

    keyUp: function (event) { 
    if (event.keyCode == 13) { 
     var search_text = $('#searchbox').val(); 
     console.log(search_text); 
     this.sendAction('searchEnterAction', search_text); 
    } 
    } 

}); 

Answer 2

有一對夫婦的防止這種正常工作的問題。

首先，組件中的輸入需要綁定到在搜索框中輸入的值。這可以通過傳遞一個search_value屬性到組件，並結合輸入這樣進行：

{{input type="text" placeholder="Search" id="searchbox" value=search_value}}

的第二個問題是，你的搜索路徑需要能夠對這個search_value值傳遞到組件。要解決這個問題，你需要弄清楚重構你的模板有什麼意義。這裏是一個移動的初始搜索框到一個單獨的index模板，然後一個選項增加了一個新的，必然的搜索框爲search模板：

<script type="text/x-handlebars" data-template-name="application"> 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="index"> 
    {{top-bar searchEnterAction='searchEnterAction'}} 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="components/top-bar"> 
{{input type="text" placeholder="Search" id="searchbox" value=search_value}}</script> 

<script type="text/x-handlebars" data-template-name="search"> 
    <div>In search area!</div> 
    {{top-bar searchEnterAction='searchEnterAction' search_value=model.search_value}} 
</script> 

JSbin