"Organize Your SproutCore Collection With Ease: Sorting

Question

"Organize Your SproutCore Collection With Ease: Sorting

I am struggling with sorting a list of todos based on their associated tag property. I have added a "Sort By Tag" button in the view, but when clicked, nothing happens and the collection remains unsorted. Can you please help me identify what is wrong with the code below?

 This is my code snippet from todos.js:
 Todos.SortingView = SC.TemplateView.extend({
  sortBinding: 'Todos.todoListController.sortTodos'
});

 Here is the sortTodos function defined in todoListController:
    sortTodos: function() {
   Todos.store.find(Todos.Todo).sortProperty('tag');
  }

 And this is how I implemented it in the Handlebars view:
{{#view Todos.SortingView id="stats"}}
  {{#view SC.Button classBinding="isActive" target="Todos.todoListController" action="sortTodos"}}
    Sort By Tag
  {{/view}}
{{/view}}

{{#collection SC.TemplateCollectionView contentBinding="Todos.todoListController" itemClassBinding="content.isDone"}}
  {{view Todos.MarkDoneView}} - Tag - {{content.tag}}
{{/collection}}

javascript sproutcore-2 sproutcore-views sproutcore-controllers

Answer 1

Answer №1

rearrangeTasks: function() {
   Tasks.store.find(Tasks.Task).sortBy('priority');
}

must be changed to:

rearrangeTasks: function() {
   this.set('sortBy', 'priority');
}

If new tasks are added, use addObject and access modifiedItems instead of just data

addTask: function(name) { 
    // var task = Task.create({ name: name });    
    var taskExists = this.filterProperty('name', name).length > 0;
    if (!taskExist) {
        Tasks.store.createRecord(Tasks.Task, { name: name }); 
        // this.pushObject(task); 
    }
}

Answer 2

rearrangeTasks: function() {
   Tasks.store.find(Tasks.Task).sortBy('priority');
}

must be changed to:

rearrangeTasks: function() {
   this.set('sortBy', 'priority');
}

If new tasks are added, use addObject and access modifiedItems instead of just data

addTask: function(name) { 
    // var task = Task.create({ name: name });    
    var taskExists = this.filterProperty('name', name).length > 0;
    if (!taskExist) {
        Tasks.store.createRecord(Tasks.Task, { name: name }); 
        // this.pushObject(task); 
    }
}

Answer 3

Answer №2

In the todoListController, let's assume that the controller's content has been loaded from a data store.

sortTodos: function(){
var query= SC.Query.local('Todos.Todo', {orderBy: 'tag'});
Todos.todoListController.set('content',Todos.store.find(query));
}

Answer 4

In the todoListController, let's assume that the controller's content has been loaded from a data store.

sortTodos: function(){
var query= SC.Query.local('Todos.Todo', {orderBy: 'tag'});
Todos.todoListController.set('content',Todos.store.find(query));
}

"Organize Your SproutCore Collection With Ease: Sorting

Answer №1

Answer №2

Similar questions

Utilizing JavaScript Plugin to Fix Image Source URLs in Incorrect Directories

Is it necessary to generate a file for each API in Next.js?

Gulp and Babel: Module Not Found Error

The search for 'partition' in 'rxjs' did not yield any results

How to Assign a Specific ID to the Body Tag in Wordpress Using functions.php

The mobile devices are not showing my HTML website

An error was encountered while parsing JSON: Unexpected token u found at the beginning of the JSON data. This occurred in the file AuthContext.js within the context folder of the src directory

javascript event-driven class

In Vue js, where is the best place to incorporate something similar to a 'base.html' template?

Shifting a division using insertAfter

Steer clear of downloading images while on your smartphone

Hiding elements in FireBase and Angular based on user identification

Struggling with mapping through a multidimensional array?

The challenges encountered with JSONP/Ajax Script - displaying 'Undefined'

a beginner's guide to utilizing the grunt target

What is a clever way to code this Angular HTML using just a single <a> tag?

Implementing recursive functionality in a React component responsible for rendering a dynamic form

Handling an HTML Form without the Submit Button using VeeValidate

Merging Documents in PouchDB

Newbie to Next-JS exploring the use of two dynamic APIs, with successful integration of one while encountering difficulties with the other