New Twiddle

actions.items.js

export const updateItem = (id, name) => dispatch => dispatch({type: 'UPDATE_ITEM', id, name});
export const toggleEdit = (id, value) => dispatch => dispatch({type: 'TOGGLE_EDIT', id, value});

components.ui-form.js

import Ember from 'ember';

export default Ember.Component.extend({
  didReceiveAttrs() {
    this._super(...arguments);
    const itemName = this.get('item.name');
    this.set('itemName', itemName);
  }
});

components.ui-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li'
});

components.ui-list.js

import Ember from 'ember';
import { connect } from 'ember-redux';
import { toggleEdit, updateItem } from '../actions/items';


const ListComponent = Ember.Component.extend({
  tagName: 'ul'
});

const stateToComputed = state => ({
  items: state.items.all,
  editing: state.items.editing
});

const dispatchToActions = {
  toggleEdit,
  updateItem
};


export default connect(stateToComputed, dispatchToActions)(ListComponent);

helpers.is-equal.js

import Ember from 'ember';

export default Ember.Helper.helper(function(params) {
  return params[0] === params[1];
});

reducers.index.js

import { combineReducers } from 'redux'
import items from './items'

const rootReducer = combineReducers({
  items
})

export default rootReducer

reducers.items.js

import mapValues from 'lodash/mapValues';
import defaults from 'lodash/defaults';

const initialState = {
  editing: null,
  all: {
    1: {
      id: 1,
      name: 'One'
    },
    2: {
      id: 2,
      name: 'Two'
    },
    3: {
      id: 3,
      name: 'Three'
    }
  }
};

export default function items(state, action) {
  switch (action.type) {
    case 'UPDATE_ITEM': {
      let items = mapValues(state.all, item => {
        return item.id === action.id ? defaults({
          name: action.name
        }, item) : item;
      });
      return Object.assign({}, state, { all: items });
    }
  
    case 'TOGGLE_EDIT': {
      let editing = !action.value ? null : action.id;
      return Object.assign({}, state, { editing: editing });
    }

    default: {
      return state || initialState;
    }
  }
}

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

ul { list-style-type: none; }

templates.application.hbs

<h1>Master Detail Example</h1>
<br>
{{#ui-list as |items editing updateItem toggleEdit|}}
  {{#each-in items as |key item|}}
    {{ui-item item=item editing=editing updateItem=(action updateItem item.id) toggleEdit=(action toggleEdit item.id)}}
  {{/each-in}}
{{/ui-list}}

templates.components.ui-form.hbs

<form {{action updateItem itemName on="submit"}}>
  <input type="text" value={{itemName}} oninput={{action (mut itemName) value="target.value"}}>
  <input type="submit" value="submit" />
</form>

templates.components.ui-item.hbs

<span>{{item.name}}</span>
{{#if (is-equal item.id editing)}}
  <button onclick={{action toggleEdit false}}>done</button>
  {{ui-form item=item updateItem=updateItem}}
{{else}}
  <button onclick={{action toggleEdit true}}>edit</button>
{{/if}}

templates.components.ui-list.hbs

{{yield items editing (action "updateItem") (action "toggleEdit")}}

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-redux": "4.0.0",
    "ember-lodash-es-shim": "1.1.0"
  }
}