使用ember.js为非动态路由重新加载模型的正确方法是什么？ [英] What is the right approach to reload the model for a non-dynamic route with ember.js?
本文介绍了使用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屋！
查看全文
