从json数据将值加载到选择菜单
我尝试使用ember.js构建一个多表单。我已经使用ObjectController中的数据数组创建了表单的第一步,但现在需要从rails应用程序提供的JSON对象获取数据。我在理解如何使用ember数据检索JSON对象并将选项数据加载到选择菜单中时遇到了一些问题 这是我的HTML:从json数据将值加载到选择菜单,json,ember.js,Json,Ember.js,我尝试使用ember.js构建一个多表单。我已经使用ObjectController中的数据数组创建了表单的第一步,但现在需要从rails应用程序提供的JSON对象获取数据。我在理解如何使用ember数据检索JSON对象并将选项数据加载到选择菜单中时遇到了一些问题 这是我的HTML: <div class="col-md-12 col-xs-12 content"> <div class="text-center center-block"> <div
<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>
以下是来自rails应用程序的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对象获取数据并在表单的步骤中显示它
我这里有一个静态表单的工作示例:
如果您能深入了解如何使用Ember数据加载JSON对象,我们将不胜感激
::更新:::
我做了一些更新,修改了路由以反映源数据嵌套,并添加了模型定义和API请求。您可以在此处看到更新的JSBin:
在本例中,我需要做的是将JSON数据中的选项加载到select菜单中。出于某种原因,我的Ember控制台确实将数据加载到模型中,但我无法通过模板访问它 若要在select元素中选择值,需要向view Ember添加值。按如下方式选择:
{{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'));
}
}
这不是我想要的,但是谢谢你的尝试。我仍在探索JS框架,现在Backbone.JS是我的重点。
actions: {
step2: function() {
console.log(this.get('selecedStudies'));
}
}