呈現到動態插座

Question

我想製作一個項目列表，當點擊時，顯示與列表項目內嵌的編輯表單。

到目前爲止，這是我已經試過：

router.js.coffee

App.Router.map()-> 
    @resource 'friend_management', -> 
    @resource 'groups', -> 
     @resource 'group', path: '/:group_id', -> 
     @route 'edit' 

模板/ groups.hbs

<div id="group-list"> 
    {{#each}} 
    {{#view Dfw.GroupView}} 
     {{link-to name 'group.edit' this class=cssClass tagName='div'}} 
     {{outlet groupEditOutletName}} 
    {{/view}} 
    {{/each}} 
</div> 
<!-- it works fine if there is one outlet rendered here, 
    but I would prefer the outlet for the edit form rendered inline --> 

模板/組/ edit.hbs

{{input type='text' value=name placeholder="Group name"}} 
<button {{action update}}>Update Group</button> 

路線/group/edit.js.coffee

App.GroupEditRoute = Ember.Route.extend 
    renderTemplate: (controller, model)-> 
    @render('group/edit', outlet: "group#{model.id}", into: 'groups') 

我得到的印象是Ember.js不允許動態命名的店鋪，但沒有人知道周圍的工作？你有

Answer 1

一種選擇是放置要被內聯放置作爲實際視圖的一部分編輯UI。這將刪除動作仍然是基於路由器的能力，因此您將無法獲得組/編輯/ ID，但您可以在線編輯。

Dfw.GroupView = Ember.View.extend({ 
    templateName: 'groupView', // or whatever you call it 
    isEditing: false, 
    click: function(evt) { 
    if (!this.get('isEditing')) { 
     this.set('isEditing', true); 
    } 
    }, 
    actions: { 
    update: function (e) { 
     // Update code here 
     this.set('isEditing', false); 
    } 
}); 

然後你對組視圖模板可能是這樣的：

<div {{bind-attr class=cssClass}}> 
    <!-- HTML that will be shown even when not editing goes here --> 
    {{#if view.isEditing}} 
    {{input type='text' value=name placeholder="Group name"}} 
    <button {{action view.update}}>Update Group</button> 
    {{/if}} 
</div> 

我希望這有助於。雖然它不使用路由，但似乎在這種情況下使用路由不會有多大意義，因爲您正在查看所有對象，而不是查看其中一個對象，然後單擊編輯。

祝你好運！