Question

我有一个多表单，我正在尝试使用ember.js构建。我在ObjectController中使用数据数组创建了表单的第一步，但我现在需要从rails应用程序提供的JSON对象中获取数据。我在理解如何使用ember-data来检索JSON对象并将选项数据加载到我的选择菜单中时遇到了一些麻烦。

这是我的HTML：

<div class="col-md-12 col-xs-12 content">
  <div class="text-center  center-block">
    <div class="col-md-12">
      <span>Which of these</span>
      <h2>Activities Appeal</h2>
      <span>to you the most?</span>
      <div class="form-group single-step">  
        {{view Ember.Select 
          content=studies
          optionValuePath="content.value"
          optionLabelPath="content.label"
          prompt="Area of Study"
          name="answer[3]"
          id="answer_3"
          class="form-control span12"                       
        }}
    </div>                  
  </div>
</div>

这是我的JS：

var Mobile = Ember.Application.create({
    LOG_TRANSITIONS: true
});

/** Setup the urls for the mobile screens **/
Mobile.Router.map(function(){
    this.resource('index', { path: "/" });  
});

/* Extend the controllers to load objects */
Mobile.IndexController = Ember.ObjectController.extend({
    selecedStudies:null,
  studies: [
        {value:'14', label: 'Business'},
        {value:'15', label: 'Criminal Justice'},
        {value:'16', label: 'Education'},
        {value:'17', label: 'Engineering & Science'},
        {value:'18', label: 'Fire &amp; Emergency Mgmt'},
        {value:'19', label: 'Healthcare'},
        {value:'20', label: 'Information Technology'},
        {value:'21', label: 'Legal/Paralegal Studies'},
        {value:'22', label: 'Liberal Arts'},
        {value:'24', label: 'Psychology & Counseling'},
        {value:'25', label: 'Social Services'},
        {value:'26', label: 'Web/Graphic Design'},
        {value:'27', label: 'Theology'},
        {value:'23', label: 'Nursing'}  
  ]
});

以下是来自rails app的JSON数据：

{"form_id":17,"questions":[{"question":{"id":3,"identifier":"","name":"Area of Study","question_validation_id":null,"require_question":true,"set_as_qualification":false,"type_id":3,"from_option":true,"options":[{"option":{"id":14,"name":"Business"}},{"option":{"id":15,"name":"Criminal Justice"}},{"option":{"id":16,"name":"Education"}},{"option":{"id":17,"name":"Engineering & Science"}},{"option":{"id":18,"name":"Fire & Emergency Mgmt"}},{"option":{"id":19,"name":"Healthcare"}},{"option":{"id":20,"name":"Information Technology"}},{"option":{"id":21,"name":"Legal/Paralegal Studies"}},{"option":{"id":22,"name":"Liberal Arts"}},{"option":{"id":24,"name":"Psychology & Counseling"}},{"option":{"id":25,"name":"Social Services"}},{"option":{"id":26,"name":"Web/Graphic Design"}},{"option":{"id":27,"name":"Theology"}},{"option":{"id":23,"name":"Nursing"}}],"option_view":"grid"}}]}

最终目标是能够以多个表单的形式获取和发布每个步骤的数据，但是现在我只需要能够从JSON对象获取数据并在表单的步骤中显示它。

我在这里提供了一个静态表单的工作示例：http://jsbin.com/qefod/5/edit

对使用Ember Data加载JSON对象的正确Ember方式的任何见解都将非常感激。

::: UPDATE :::

我有一些更新，我已经更改了路由以反映源数据嵌套，并且我添加了模型定义和API请求。您可以在此处查看更新的JSBin：http://jsbin.com/qefod/7/edit

在此示例中，我需要做的是将JSON数据中的选项加载到选择菜单中。出于某种原因，我的Ember控制台确实将数据加载到模型中，但我无法通过模板访问它。

Answer 1

要在select元素中选择值，您需要为视图Ember.select添加值，如下所示：

{{view Ember.Select 
      content=studies
      optionValuePath="content.value"
      optionLabelPath="content.label"
      prompt="Area of Study"
      name="answer[3]"
      value=selecedStudies
      id="answer_3"
      class="form-control span12"                       
}}

然后您可以在控制器中的step2操作中访问它：

actions: {
    step2: function() {
        console.log(this.get('selecedStudies'));
    }
}

从json数据将值加载到选择菜单中

1 个答案: