Ember.js 余烬-隐藏已创建的未提交记录
我需要一些关于余烬数据记录创建的帮助 我的应用程序是基于代码学校教程的基础应用程序,包含书籍和评论 应用程序正在使用RestaAdapter 书页上有一个表格,可以用来写和发送评论Ember.js 余烬-隐藏已创建的未提交记录,ember.js,Ember.js,我需要一些关于余烬数据记录创建的帮助 我的应用程序是基于代码学校教程的基础应用程序,包含书籍和评论 应用程序正在使用RestaAdapter 书页上有一个表格,可以用来写和发送评论 <div class="row"> <div class="col-sm-09"> <h4>Reviews</h4> {{#each review in reviews}} <div class="col-sm-3">
<div class="row">
<div class="col-sm-09">
<h4>Reviews</h4>
{{#each review in reviews}}
<div class="col-sm-3">
<p>{{review.text}}</p>
<p class="text-info">{{review.reviewedDate}}</p>
</div>
{{else}}
<p class="text-muted">No Reviews Yet. Be the first to write one!</p>
{{/each}}
</div>
<div class="col-sm-3">
<h4>Review</h4>
{{textarea valueBinding='review.text'}}
<br>
<button {{action 'createReview'}} class='btn-primary'>Review</button>
{{#if review.text}}
<br><h4>Preview</h4>
<p class="text-muted">{{review.text}}</p>
{{/if}}
</div>
我的模型:
App.Book = DS.Model.extend({
title: DS.attr('string'),
isbn: DS.attr('string'),
summary: DS.attr('string'),
isAvailable: DS.attr('boolean'),
featured: DS.attr('boolean'),
author: DS.belongsTo('author', {async: true}),
reviews: DS.hasMany('review', {async: true}),
// computed properties
image: function () {
return 'images/books/' + this.get('id') + '.jpg';
}.property('id'),
isNotAvailable: function () {
return !this.get('isAvailable');
}.property('isAvailable')
});
App.Review = DS.Model.extend({
text: DS.attr('string'),
reviewedAt: DS.attr('date'),
book: DS.belongsTo('book'),
//Computed Properties
reviewedDate: function () {
return moment(this.get('reviewedAt')).format('LLL');
}.property('reviewedAt')
});
控制器为每个打开的书创建一个新的“review”对象,并最终在按下按钮时保存它
这是可行的,但是
我的未受限制的记录显示在书评列表中,甚至在提交它之前(好像它是一个实时预览),在调用controller.get('model.reviews').addObject(review)之前代码>
我的代码有什么问题,以及如何仅显示提交的记录(successful save()调用)。您可以通过isNew
标志筛选评论
在BookController
中,您可以执行以下操作:
committedReviews: function () {
return this.get('model.reviews').filter(function(review) {
return !review.get('isNew');
});
}.property('model.reviews')
是否来自{{each}
帮助程序?余烬文档:与Handlebars中的所有内容一样,{{{#each}}助手也具有绑定意识。如果应用程序向数组中添加新项或删除项,则DOM将更新,而无需编写任何代码。使用isNew
标志代替isDirty
committedReviews: function () {
return this.get('model.reviews').filter(function(review) {
return !review.get('isNew');
});
}.property('model.reviews')