Pass a non-bound input value to arraycontroller via an action in ember

Question

I'm rendering a iterative template that contains an input field and an action to my array controller, I can happily pass the current model but I'm a loss as to how to pass the unbound input value contents.

To give a totally simple example, think of a list of products template on an ecomms site, with a qty field and update button.

{{#each product in controller}}
   {{product.name}}
   <input name="qty" placeholder="Qty" />
   <button {{action addToCart product}} ></button>  
{{/each}}

This is a simple product list, not a view cart contents list so the qty field has no business being a part of the product model. I need qty to remain unbound (always loading blank)

How can I pass the value of the qty field to the addToCart action?

Oren Hizkiya Oren Hizkiya · Accepted Answer · 2015-02-12T16:32:11

You are correct that the quantity should not be bound to the model, but it should be bound to either a controller/component.

I recommend extracting a component and doing something like follows:

{{#each product in controller}}
   {{product-component product=product}}
{{/each}}

In app/components/product-component.js:

import Ember from 'ember';

export default Ember.Component.extend({
    quantity:0,
    actions: {
        addToCart: function (product, qty) {
            console.log(product.get('name') + ' ' + qty);
        }
    }
});

In app/templates/components/product-component.hbs:

   {{product.name}}
   {{input value=quantity name="qty" placeholder="Qty"}}
   <button {{action addToCart product quantity}} ></button>

Notice that we have passed the model in as product but we are binding to quantity which is not a property of product.

Pass a non-bound input value to arraycontroller via an action in ember

1 Answers