Admiral2

components.number-count.js

import Ember from 'ember';
import hbs from 'htmlbars-inline-precompile';
import { connect } from 'ember-redux';

const stateToComputed = state => {
  return state; 
};

const dispatchToActions = dispatch => {
  return {
    add: () => dispatch({type: 'ADD'}),
    new: () => dispatch({type: 'new'})
  };
};

const NumbersComponent = Ember.Component.extend({
    layout: hbs`
      <button onclick={{action "add"}}>add</button>

<table style="width:100%">
  <tr>
    <th>faction</th>
    <th>owned</th> 
    <th>set</th>
    <th>type</th>
    <th>keywords</th>
    <th>rules</th>
    <th>points</th>
  </tr>
{{#each state.list as |st index| }}  
<tr>
    <td>{{st.faction}}</td>
    <td>{{st.owned}}</td> 
    <td>{{st.set}}</td> 
    <td>{{st.type}}</td> 
    <td>{{st.keywords}}</td> 
    <td>{{st.rules}}</td> 
    <td>{{st.points}}</td> 
</tr>
{{/each}}
<tr>
{{log 'state' state.new}}
    <td>{{input placeholder='faction' value=state.new.faction keyUp=(action "new" state)}}</td>
    <td>{{input placeholder='owned' value=state.new.owned keyUp=(action "new" state)}}</td>
    <td>{{input placeholder='type' value=state.new.type keyUp=(action "new" state)}}</td>
    <td>{{input placeholder='keywords' value=state.new.keywords keyUp=(action "new" state)}}</td>
    <td>{{input placeholder='rules' value=state.new.rules keyUp=(action "new" state)}}</td>
    <td>{{input placeholder='points' value=state.new.points keyUp=(action "new" state)}}</td>
</tr>
</table>
<button action=> Click Me</button>
    `
});

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

reducers.index.js

import { combineReducers } from 'redux';

const initialState = {
  new:{
  faction:'',
  owned:'',
  set:'',
  type:'',
  keywords:'',
  rules:'',
  points:''
  },
list:  [{
  faction:'faction',
  owned:'owned',
  set:'set',
  type:'type',
  keywords:'keywords',
  rules:'rules',
  points:'points'
}]
}

const state = ((state, action) => {
    if(action.type === 'ADD') {
        return state + 1;
    }
    if(action.type === 'new') {
      console.log('\n\n\nnew', {state}, {action})  
      return state;
    }
    return state || initialState;
});

export default combineReducers({
    state
});

templates.application.hbs

<h1>Admiral</h1>
<br>
<br>
{{number-count}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-redux": "3.0.0"
  }
}