編輯器窗體從按鈕雙擊

Question

我有一個表中的記錄列表。我希望在雙擊某一行時顯示一個編輯器表單。最好但不是必須的，該操作被路由，以便表單具有諸如/ songs/edit /：song_id之類的URL。大多數類似的例子，我看到包裝在#linkTo括號一些文字或按鈕，但我想這樣做從視圖類似的東西，所以我有以下形式的事件：

App.SongView = Em.View.extend({ 
    doubleClick: function(evt) { 
     something here;  
    } 
}); 

Answer 1

而不是使用{ {linkTo}}幫助程序，可以使用{{action}}幫助程序，並指定target=view（請參閱handling action in view not router）。

要處理更改網址，您可以撥打電話transitionTo併爲其提供SongsEdit路線以及參數。

模板：

{{#each record in records}} 
    <div class="record" {{action editForm record on="doubleClick" target="view"}}> ... </div> 
    ... 
{{/each}} 

觀點：

editForm: function(record){ 
    // need to use the controller to call transitionToRoute 
    this.get('controller').transitionToRoute("songsEdit", record); 
} 

注意，你實際上並不需要處理在針對這一動作;在控制器中處理這個也很有意義。

或者，如果您想要使用內置的doubleClick處理程序來處理它，則無需在模板中指定任何內容，並且只需確保您有權訪問要傳遞的單個記錄到transitionTo。

它可能看起來像：

doubleClick: function(e) { 
    record = this.get('controller.content') // or however you're wrapping the underlying record 
    this.get('controller').transitionToRoute('editRoute', record); 
} 

您的路線當然將負責顯示實際編輯表單。