リストに表示するモデルの単純な配列があります(パス:/things)。モデルは REST-API からロードされます。
ネストされたルートでは、新しいモデルを追加する機能があります。(パス: /things/add)。新しいモデルは 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>