用ember.js重新加载非动态路由模型的正确方法是什么?
What is the right approach to reload the model for a non-dynamic route with ember.js?
我有一个简单的模型数组,我在列表中显示(路径:/things)。模型从REST-API加载。
在嵌套路由中,我有添加新模型的功能。(路径://添加)。新模型通过REST-API持久化。
添加新模型后,我执行transitionTo('things')
以返回列表。
在ember文档之后,通过使用"transitionTo", model
钩子和setupController
钩子都不会被非动态路由调用。
当使用transitionTo
时,在非动态路由上刷新模型的正确方法是什么?或者:在不使用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>
因此,如果使用ember-data,保存记录的副作用将是更新findAll()的结果。您可以通过手动更新数组或在添加新记录时触发刷新来完成相同的操作。在任何一种情况下,建议从ThingsAddController的add fx。例如:
App.ThingsAddController = Em.ObjectController.extend({
needs: [things],
add : function() {
newThing = App.Thing.save(this.content);
this.get('controllers.things').pushObject(newThing);
this.transitionToRoute('things');
},
});
相关文章:
- 延迟 AngularJS 路由更改,直到加载模型以防止闪烁
- 如何调用索引/索引路由'用户后的s模型挂钩's的授权
- 如何在ember.js中将多个模型处理成一个模板/路由
- Ember.js:路由返回多个模型,包括一个promise,给出错误
- 使用可选参数和默认模型定义路由
- Ember.js:如何使用模型的单个实例创建路由/控制器
- 如何计算父路由模型的项目以在嵌套路由中使用它
- 余烬转换到路由模型挂钩未调用
- Ember JS - 从路由操作更新/刷新模型数据
- 从父级转换时,不会触发 Ember 子路由模型方法
- Ember.js:使用模型实例的路由获取模型实例的 url 字符串
- 如何在模型窗口中传递路由参数值 angularjs.
- 多个模型成一条路由并过滤 Ember 选择
- AngularJS路由和模型 - 我走在正确的轨道上
- 使用 Ember js 从非嵌套路由访问路由模型
- 如何将内置选项卡与没有路由的 ember 集成,以便为每个选项卡异步加载模型
- 动态路由中使用的空数组模型
- 余烬与数据 - 路由模型无法一致地工作
- Ember&RSVP:如何解决路由中的嵌套关系's模型函数
- 如何在backbone.js中将视图/模型的引用传递给其他视图/模型/路由?