如何在控制器对添加项目执行操作后更新视图
How to update view after controller action on adding item
我想在添加后自动更新评论列表
问题是我已经从带有夹具的 emberjs 示例开始,并对其进行了修改,以便我可以在页面开头获取当前数据。我还通过ajax添加了注释功能,所有这些东西都运行良好。现在我只是不知道如何在添加新评论后自动显示新评论。
这是我的应用代码:
window.Comments = Ember.Application.create();
Comments.Comment = DS.Model.extend({
content: DS.attr('string')
});
Comments.ApplicationController = Ember.ArrayController.extend({
rootElement: "#out",
actions: {
createComment: function () {
var title = $('#new-comment').val();
if (!title.trim()) { return; }
var comment = this.store.createRecord('comment', {
content: title
});
this.set('newContent', '');
comment.save();
}
}
});
Comments.commentsView = Ember.View.extend({
id: 'com',
layoutName: 'commentsTemplate',
comments: null,
init: function() {
console.log('init');
var par = this;
$.ajax({
url: "/getcomments",
type: "GET",
success: function(data) {
par.set("comments", data);
}
});
}
});
这是我的模板
<div id="out"></div>
<script type="text/x-handlebars">
<div class="container">
<div class="row">
<div class="col-xs-6">
{{#view Comments.commentsView}}{{/view}}
</div>
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="commentsTemplate">
{{#each comment in view.comments}}
<div class="well">
<b>{{comment.content}}</b>
</div>
{{/each}}
<br />
{{input type="text" id="new-comment" placeholder="What you want to say?" value=newContent action="createComment"}}
</script>
顺便说一句。我有var title = $('#new-comment').val();
原因this.get('newContent')
返回未定义的值,所以我必须做一些事情来让它工作
您正在使用 store 来创建和保存新注释,但在视图初始化期间使用原始 json-request 从服务器获取comments
属性一次。
显然,您还需要使用商店来检索评论。在这种情况下,您的集合将自动更新视图。
按照惯例,它应该在控制器中:
Comments.ApplicationController = Ember.ArrayController.extend({
rootElement: "#out",
content: null,
loadComments: function() {
this.set('content', this.store.find('comment'))
},
init: function() { this.loadComments(); this._super() }
顺便说一句,甚至在保存之前也会添加评论:我不太喜欢的功能。为了避免这种情况,我们可能会过滤我们的注释(不确定确切的语法):
persisted: function () {
this.get('content').filterBy('isNew', false)
}.property('content') // or .observes('content.@each') i'm not sure
相关文章:
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- Google 脚本:用于创建日历活动的脚本运行时不会出错,但不会执行任何操作
- 当通过AJAX调用时,控制器操作不会执行
- jQuery-将列表项的一个元素移动到同一项的另一个元素中+对我的列表中的每个项执行此操作
- 点击:更改位置后执行某些操作
- 无法执行文件.退出Acrobat PDF中的操作
- 从表单中获取用户输入执行计算(操作顺序)并输出回该表单
- 如何在ListView项模板中获取按钮来执行不同的操作
- 单击元素两次后执行操作
- ReactJS只有在操作完成后才能执行某些操作
- toogleClass函数来切换元素类并在事件期间执行某些操作
- jQuery/Javascript foreach If/Else |如果为空(不执行任何操作)Else(显示forea
- Var工作,但在使用数组执行相同操作时停止
- 如何在mvc3中执行操作而不更改当前页面
- jQuery:$.ajax() 重定向到其 URL 表单操作参数,而不是对表单操作执行 AJAX 请求
- 如何为多个操作执行简单的 jQuery
- Redux 转换到操作执行后
- 反流操作执行后触发通知/回调
- jquery如果按钮点击了执行其他操作执行其他操作
- 在操作执行之前禁用锚链接