Question

我正在渲染一个包含输入字段和动作的迭代模板到我的数组控制器，我可以很高兴地通过当前模型，但我不知道如何传递未绑定的输入值内容。

举一个非常简单的例子，想象一下ecomms网站上的产品模板列表，带有qty字段和更新按钮。

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

这是一个简单的产品列表，而不是查看购物车内容列表，因此qty字段没有业务成为产品模型的一部分。我需要数量保持未绑定（始终加载空白）

如何将qty字段的值传递给addToCart操作？

Answer 1

您是正确的，数量不应该绑定到模型，但它应该绑定到控制器/组件。

我建议提取一个组件并执行以下操作：

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

在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);
        }
    }
});

在app/templates/components/product-component.hbs：

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

请注意，我们已将模型作为product传递，但我们绑定的quantity不是product的属性。

通过ember中的操作将非绑定输入值传递给arraycontroller

1 个答案: