ember.js - 具有由模型定义的动态字段的表单

Question

我想构建一些不完全符合我目前所见的任何文档或示例的东西。也许我正在尝试的是某种已知的坏主意。如果是这样，请告诉我。

我正在尝试弄清楚如何围绕一个有点不寻常的服务器端 API 构建我的 Controller 和 View 。我有一个正在收集一些数据的表单，但表单中的字段需要是动态的，基于来自服务器的数据。这是 API 返回内容的示例(为简单起见，来自虚构域的虚构示例)。我没有使用 Ember 数据。

GET/event_color_choices?event_id=42&user_id=1

{
  user_id: 1,
  event_id: 42,
  color_choices: [
    // These will become form fields in the dynamic form.
    // They won't be the same every time:
    {
      color: 'blue',
      popularity: 100,
      some_other_metadata: 'foo'
    },
    {
      color: 'green',
      popularity: 200,
      foo: 'bar'
    },
    {
      color: 'orange'
      popularity: 150,
      baz: 'qux'
    }
  ]
}

所以在我的 route ，这个数据结构成为我的模型:

App.EventChoicesRoute = Ember.Route({
  model: function(params) {
    return Ember.$.getJSON('event_color_choices' {
        event_id: params.eventId,
        user_id: params.userId
    });
  }
})

在我看来，我想做这样的事情(我想？):

{{#each colorChoice in color_choices}}
  <label>How much do you like the color {{colorChoice.color}}?</label>
  {{input type='text' value=???}}  // <--- This is the part I'm having trouble with
{{/each}}

应该看起来像:

---

你有多喜欢蓝色？

[[此处输入文本]]

你有多喜欢绿色？[[此处输入文本]]

你有多喜欢橙色？[[此处输入文本]]

---

当用户填写表单时，我希望将模型更新为如下所示，我将在提交表单时将其发送回服务器:

POST/event_color_choices

{
  user_id: 1,
  event_id: 42,
  color_choices: [
    {
      color: blue,
      // ...
      value: "I like blue a lot.  It's my favoriate color."
    },
    {
      color: 'green',
      // ...
      value: 'Green is just okay'
    },
    {
      color: 'orange',
      // ...
      value: 'Orange is an okay starter color, for people who are just getting into colors'
    }
  ]  
}

我可以让 ember 这样做吗？我应该采取其他方法吗？

Answer 1

这里是 a working JS Bin example .

解决方案概要:
- 在 Controller 上保留一个指定的数组 formData 以满足表单数据绑定(bind)的需要。
- 该数组可以在路由的 setupController 方法中更新，并在路由的 resetController 方法中清除。
- 提交表单时，模型会用 formData 内容更新并发送到服务器(在示例中，它只是打印出字符串化模型)。

*注意:IndexRoute.model 方法返回一个 promise 以模拟服务器异步请求。