Question

我想构建一些与我迄今为止看到的任何文档或示例不完全一致的内容。也许我正在尝试的是某种已知的坏主意。如果是的话，请告诉我。

我正在试图弄清楚如何构建我的控制器和围绕服务器端API的视图，这有点不寻常。我有一个表单，我正在收集一些数据，但表单中的字段需要是动态的，基于来自服务器的数据。以下是API返回的示例（为简单起见，来自虚构域的组合示例）。我没有使用余烬数据。

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'
    }
  ]
}

所以在我的路线中，这个数据结构成了我的模型：

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'
    }
  ]  
}

我可以制作余烬吗？我应该采取其他方法吗？

Answer 1

这是a working JS Bin example。

解决方案大纲：
- 在控制器上保留指定的数组formData以满足表单数据绑定需求 - 此阵列可以在路径的setupController方法中更新，并在路径的resetController方法中清除。
- 提交表单时，模型将使用formData内容进行更新并发送到服务器（在示例中，它只打印出字符串化模型）。

*注意：IndexRoute.model方法正在返回一个承诺，以模拟服务器异步请求。

具有由模型定义的动态字段的表单

1 个答案: