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>

路由/组/ 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>

我希望这会有所帮助。虽然它不使用路由，但在这种情况下使用路由似乎没有多大意义，因为您正在一起查看所有对象，而不是查看其中一个然后单击编辑。

祝你好运！

渲染到动态插座

1 个答案: