Mimic action helper behavior for native elements

addon/helpers/route-action.js

@@ -41,7 +41,7 @@ export default Helper.extend({
     return getOwner(this).lookup('router:main');
   }).readOnly(),
 
-  compute([actionName, ...params]) {
+  compute([actionName, ...params], namedValue) {
     let router = get(this, 'router');
     assert('[ember-route-action-helper] Unable to lookup router', router);
 
@@ -50,10 +50,20 @@ export default Helper.extend({
       assert(`[ember-route-action-helper] Unable to find action ${actionName}`, handler);
     });
 
+    let processArgs = (args) => {
+      let valuePath = namedValue && namedValue.value;
+
+      if (valuePath && args.length > 0) {
+        args[0] = get(args[0], valuePath);
+      }
+
+      return args;
+    }
+
     let routeAction = function(...invocationArgs) {
       let { action, handler } = getRouteWithAction(router, actionName);
       let args = params.concat(invocationArgs);
-      return run.join(handler, action, ...args);
+      return run.join(handler, action, ...processArgs(args));
     };
 
     routeAction[ACTION] = true;

tests/acceptance/main-test.js

@@ -92,3 +92,12 @@ test('it invokes action in the current route hierarchy', function(assert) {
   click('.foo-button');
   andThen(() => assert.equal(findWithAssert('.foo-value').text().trim(), 'Set via route-with-action: Hello world Bob!'));
 });
+
+test('it calls action with the specified valuePath', function(assert) {
+  visit('/');
+  andThen(() => {
+    let optionBar = find('.option-bar');
+    fillIn('.foo-select', optionBar.val());
+    andThen(() => assert.equal(findWithAssert('.foo-value').text().trim(), 'bar'));
+  });
+});

tests/dummy/app/templates/application.hbs

@@ -1,3 +1,8 @@
 <h2 class="foo-value">{{foo}}</h2>
 
+<select class="foo-select" onchange={{route-action "updateFoo" value="target.value"}}>
+  <option value="baz">Baz</option>
+  <option value="bar" class="option-bar">Bar</option>
+</select>
+
 {{outlet}}