ember.js集合视图中特定于项的操作
我刚刚开始使用ember.js库来了解它的功能。我想显示一个数据表,在每行的右侧,有一个删除按钮从表中删除该项。但是我不知道怎么做 注意,我还尝试创建一个子视图(ItemView)并在{{{each…}}{{/each}}}部分内联使用它,但是ember.js抱怨需要一个视图类而不是ItemView,即使ItemView是使用ember.view.create定义的。我也想知道为什么这不起作用。即使是在文档中的#each块中使用子视图的示例代码也不起作用 即使我可以声明一个名为ItemView的子视图来呈现每个单独的项,我仍然不知道如何使该特定视图的removietem操作知道要从itemsController集合中删除哪个项。是否存在视图的属性以获取子视图在集合中绑定到的项实例 以下是我的视图模板中包含列表的部分:ember.js集合视图中特定于项的操作,ember.js,Ember.js,我刚刚开始使用ember.js库来了解它的功能。我想显示一个数据表,在每行的右侧,有一个删除按钮从表中删除该项。但是我不知道怎么做 注意,我还尝试创建一个子视图(ItemView)并在{{{each…}}{{/each}}}部分内联使用它,但是ember.js抱怨需要一个视图类而不是ItemView,即使ItemView是使用ember.view.create定义的。我也想知道为什么这不起作用。即使是在文档中的#each块中使用子视图的示例代码也不起作用 即使我可以声明一个名为ItemView的
{{#each App.itemsController}}
<tr>
<td>{{itemName}}</td>
<td><a href="#" {{action "removeItem" on="click"}}>Delete</a></td>
</tr>
{{/each}}
不确定这是否是最好的方法,但我已将项索引或项名称作为标记的属性,然后使用jQuery获取它
// template
{{#each App.itemsController}}
<tr itemName="{{itemName}}">
<td>{{itemName}}</td>
<td><a href="#" {{action "removeItem" on="click"}}>Delete</a></td>
</tr>
{{/each}}
// Javascript
window.App.ListView = Ember.View.create({
templateName: 'listView',
removeItem: function (event) {
var id = this.$().parent().parent().attr('itemName');
...
}
});
//模板
{{{#每个App.itemsController}
{{itemName}}
{{/每个}}
//Javascript
window.App.ListView=Ember.View.create({
templateName:“listView”,
removeItem:函数(事件){
var id=this.$().parent().parent().attr('itemName');
...
}
});
希望这能有所帮助。Yehuda的帖子Michael linked to演示了正确的方法,在每个链接中使用了一个子项视图。不知道为什么这对你不起作用,你已经从你的问题中删除了这段代码 Yehuda回答中的一些语法稍微过时了,所以我对其进行了更新,并将其更改为更像您的问题。您可以在这里查看:(更新到JSFIDLE 1/21/12的链接) 它的主旨是 把手
{{#each App.peopleController}}
{{#view App.PersonView personBinding="this"}}
<td>{{view.person.fullName}}</td>
<td><button {{action removeItem target="view"}}>Delete</button>
{{/view}}
{{/each}}
多亏了汤姆·惠特莫尔的帮助,我找到了同样问题的答案 阅读后,我宁愿使用
{{action removietem person}}
来明确指示应该对其执行操作的对象,而不是personBinding=“this”
<script type="text/x-handlebars">
<table>
{{#each person in App.peopleController}}
{{#view App.PersonView}}
<td>{{person.fullName}}</td>
<td><button {{action removeItem person}}>Delete</button>
{{/view}}
{{/each}}
</table>
</script>
您可以使用这个小提琴OK,当我尝试这个方法时,模板引擎似乎忽略了我在{{{{each…}}}{{/each}}块中的视图模板中放置的任何或标记。它只是把它们完全去掉。这些是唯一被剥离的标签。好的,我来回答这个问题。模板问题似乎是一个单独的问题。Thanks@JeremyBellre:缺少的标记,您是否用
标记包围了{{{each}}块?如果没有,我相信
和
标记会被删除。是的,这就是问题所在。我需要将整个标签放入模板中。我无法将模板插入现有表的元素中。一旦我将整个表放入模板中,它就不再剥离tr tags了。ember-latest.js已经发生了变化,因此上面的小提琴不再工作。修复了直接指向ember-0.9.8.1.js的fiddle,根据,使用ArrayController而不是ArrayProxy是明智的,因为从概念上讲它是一个控制器。
App.PersonView = Ember.View.extend({
tagName: 'tr',
person: null,
removeItem: function() {
var person = this.get('person');
App.peopleController.removeObject(person);
}
});
<script type="text/x-handlebars">
<table>
{{#each person in App.peopleController}}
{{#view App.PersonView}}
<td>{{person.fullName}}</td>
<td><button {{action removeItem person}}>Delete</button>
{{/view}}
{{/each}}
</table>
</script>
App = Ember.Application.create();
App.Person = Ember.Object.extend({
fullName: function() {
return this.get('firstName') + ' ' + this.get('lastName');
}.property('firstName', 'lastName')
});
App.peopleController = Ember.ArrayProxy.create({
content: [App.Person.create({ firstName: "Yehuda", lastName: "Katz" }),
App.Person.create({ firstName: "Tom", lastName: "Dale" })]
});
App.PersonView = Ember.View.extend({
tagName: 'tr',
removeItem: function(evt) {
var person = evt.context;
App.peopleController.removeObject(person);
}
});