使用ember.js为非动态路由重新加载模型的正确方法是什么? [英] What is the right approach to reload the model for a non-dynamic route with ember.js?
问题描述
在嵌套路由中,我有添加新模型的功能。 (路径:/ something / add)。新模型通过一个REST-API持久化。
添加新模型后,我会执行 transitionTo('things')
返回列表。
按照ember文档,通过使用transitionTo两者都不是模型
钩子或 setupController
-Hook被称为非动态路由。
使用 transitionTo
时,在非动态路由中刷新模型的正确方法是什么? ?或者:在不使用 transitionTo
的情况下,在非动态路由上重新加载模型的最佳方式是什么?
app.js
// App Init
App = Ember.Application.create();
//路由
App.Router.map(function(){
this.resource('things',function(){
this.route('添加');
})
});
App.IndexRoute = Ember.Route.extend({
redirect:function(){
this.transitionTo('things');
}
});
App.ThingsRoute = Ember.Route.extend({
model:function(param){
return App.Thing.findAll();
},
});
App.ThingsAddRoute = Em.Route.extend({
setupController:function(controller){
controller.set('content',App.Thing.create()) ;
}
});
//模型
App.Thing = Ember.Object.extend({
name:null,
description:null
});
App.Thing.reopenClass({
findAll:function(){
var result;
$ .ajax({
url:'http: //path/app_dev.php/api/things',
dataType:'json',
async:false,
success:function(data){
result = data。东西;
}
});
return result;
},
save:function(content){
console.log(content);
$ .ajax({
type:'post',
url:'http://path/app_dev.php/api/things',
data:{
名称:content.name,
描述:content.description
},
async:false
});
}
});
//控制器
App.ThingsAddController = Em.ObjectController.extend({
add:function(){
App.Thing.save(this.content) ;
this.transitionToRoute('things');
},
cancelAdding:function(){
this.transitionToRoute('things');
}
});
index.html
< script type =text / x-handlebars>
< div class =container>
< div class =row>
< div class =span12>
< h1>事物列表< / h1>
< / div>
{{outlet}}
< / div>
< / div>
< / script>
< script type =text / x-handlebarsdata-template-name =things / add>
< div class =span12>
< form class =form-horizontal>
< fieldset>
< div id =legend>
< legend class =>添加新事物< / legend>
< / div>
<! - 名称 - >
< div class =control-group>
< label class =control-labelfor =name> Name< / label>
< div class =controls>
{{view Ember.TextField id =nameplaceholder =输入名称valueBinding =name}}
< / div>
< / div>
<! - 说明 - >
< div class =control-group>
< label class =control-labelfor =description>说明< / label>
< div class =controls>
{{view Ember.TextArea id =descriptionplaceholder =输入描述valueBinding =description}}
< / div>
< / div>
<! - 提交 - >
< div class =control-group>
< div class =controls>
< button class =btn btn-success{{action add}}>保存< / button>
< button class =btn{{action cancelAdding}}>取消< / button>
< / div>
< / div>
< / fieldset>
< / form>
< / div>
< / script>
< script type =text / x-handlebarsdata-template-name =things>
< div class =span12>
< div class =btn-toolbar>
< div class =btn-group>
{{#linkTo things.add}}< i class =icon-plus>< / i>添加新事物{{/ linkTo}}
< / div>
< / div>
< / div>
{{outlet}}
< div class =span12>
< table cellpadding =0cellspacing =0border =0class =table table-striped>
< thead>
< tr>
< th> ID< / th>
< th> Name< / th>
< th>描述< / th>
< / tr>
< / thead>
< tbody>
{{##each item in model}}
< tr>
< td> {{item.id}}< / td>
< td> {{item.name}}< / td>
< td> {{item.description}}< / td>
< / tr>
{{/ each}}
< / tbody>
< / table>
< / div>
< / script>
所以如果你使用ember数据,保存记录的效果是findAll()的结果得到更新。您可以通过手动更新阵列来完成相同操作,也可以在添加新记录时触发刷新。在任何一种情况下,建议从ThingsAddController的添加fx。例如:
App.ThingsAddController = Em.ObjectController.extend({
需要:[things],
add:function(){
newThing = App.Thing.save(this.content);
this.get('controllers.things')。pushObject(newThing);
this .transitionToRoute('things');
},
});
I'm having a simple array of models which I display in a list (path: /things). The models get loaded from a REST-API.
In a nested route I have the functionality to add a new model. (path: /things/add). The new model is persisted over a REST-API.
After adding the new model, I do a transitionTo('things')
to get back to the list.
Following the ember documentation, by using "transitionTo" neither the model
hook nor the setupController
-Hook are called for non dynamic routes.
What is the right approach to refresh the model on a non-dynamic route, when using transitionTo
? Or: what is the best way to reload a model on a non-dynamic route without using transitionTo
?
app.js
// App Init
App = Ember.Application.create();
// Routes
App.Router.map(function() {
this.resource('things', function() {
this.route('add');
})
});
App.IndexRoute = Ember.Route.extend({
redirect : function() {
this.transitionTo('things');
}
});
App.ThingsRoute = Ember.Route.extend({
model : function(param) {
return App.Thing.findAll();
},
});
App.ThingsAddRoute = Em.Route.extend({
setupController : function(controller) {
controller.set('content', App.Thing.create());
}
});
// Models
App.Thing = Ember.Object.extend({
name : null,
description : null
});
App.Thing.reopenClass({
findAll : function() {
var result;
$.ajax({
url : 'http://path/app_dev.php/api/things',
dataType : 'json',
async : false,
success : function(data) {
result = data.things;
}
});
return result;
},
save : function(content) {
console.log(content);
$.ajax({
type : 'post',
url : 'http://path/app_dev.php/api/things',
data : {
name : content.name,
description : content.description
},
async : false
});
}
});
// Controller
App.ThingsAddController = Em.ObjectController.extend({
add : function() {
App.Thing.save(this.content);
this.transitionToRoute('things');
},
cancelAdding : function() {
this.transitionToRoute('things');
}
});
index.html
<script type="text/x-handlebars">
<div class="container">
<div class="row">
<div class="span12">
<h1>List of things</h1>
</div>
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="things/add">
<div class="span12">
<form class="form-horizontal">
<fieldset>
<div id="legend">
<legend class="">Add new thing</legend>
</div>
<!-- Name -->
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
{{view Ember.TextField id="name" placeholder="Enter Name" valueBinding="name"}}
</div>
</div>
<!-- Description -->
<div class="control-group">
<label class="control-label" for="description">Description</label>
<div class="controls">
{{view Ember.TextArea id="description" placeholder="Enter description" valueBinding="description"}}
</div>
</div>
<!-- Submit -->
<div class="control-group">
<div class="controls">
<button class="btn btn-success" {{action add}}>Save</button>
<button class="btn" {{action cancelAdding}}>Cancel</button>
</div>
</div>
</fieldset>
</form>
</div>
</script>
<script type="text/x-handlebars" data-template-name="things">
<div class="span12">
<div class="btn-toolbar">
<div class="btn-group">
{{#linkTo things.add}}<i class="icon-plus"></i> add new thing{{/linkTo}}
</div>
</div>
</div>
{{outlet}}
<div class="span12">
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped ">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{{#each item in model}}
<tr>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</script>
So if you were using ember-data, a side effect of saving the record would be that the results of findAll() get updated. You can accomplish the same by either manually updating the array or triggering a refresh when a new record is added. In either case, suggest doing that from ThingsAddController's add fx. For example:
App.ThingsAddController = Em.ObjectController.extend({
needs: [things],
add : function() {
newThing = App.Thing.save(this.content);
this.get('controllers.things').pushObject(newThing);
this.transitionToRoute('things');
},
});
这篇关于使用ember.js为非动态路由重新加载模型的正确方法是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!