I have a model Categorythat has a lot Documents. When rendering an individual, CategoryI want to list the entire child Documentsin a drag and drop sort list. I also want to double-click on any single documentone to enable inline editing for this document.
I have both parts that work there but cannot figure out how to combine them together.
For a sortable list, I use my own subclass CollectionViewfor rendering Documents, and after inserting the element, I call the html5sortable jquery plugin.
For inline editing, I set itemControllerfor each displayed document. Inside, DocumentControllerI maintained the state of the document editing application.
I am looking for information on how to combine the two approaches. It seems to me that I need to customize itemControllerfor everyone itemViewin CollectionView. I put the appropriate code below.
App.SortableView = Ember.CollectionView.extend({
tagName: 'ul',
itemViewClass: 'App.SortableItemView',
didInsertElement: function(){
var view = this;
Ember.run.next(function() {
$(view.get('element')).sortable();
});
}
});
App.SortableItemView = Ember.View.extend({
templateName: 'sortable-item',
doubleClick: function() {
}
});
App.DocumentController = Ember.ObjectController.extend({
isEditing:false,
editDocument: function () {
this.set('isEditing', true);
},
finishedEditing: function() {
var model = this.get('model');
model.get('store').commit();
this.set('isEditing', false);
}
});
<script type="text/x-handlebars" data-template-name="category">
<h1>{{ name }}</h1>
<h2>Documents</h2>
{{view App.SortableView contentBinding="documents"}}
{{#each documents itemController="document"}}
{{/each}}
</script>
Thanks for any help. I really appreciate it.
source
share