jeudi 22 juin 2017

Updating the Ember view after changing the Ember model

enter image description here

I have 4 posts. Each one has a title and an Author. Right now, it is sorted by Author. I would like to click a button (such as Sort By Title) and have the information be sorted by title instead of by author.

So far, I know that I am sorting the authors and titles and the model is being updated. The problem is displaying the updated information in the view. For some reason, I assumed that if I just did this.set('model', newModel) that the new information would display automatically. This is not so.

Here is my code.

practice.hbs




<button >Sort by Title</button>
<button >Sort by Author</button>

    <h2>Title: </h2>
    <h3>Author: </h3>


routes/practice.js

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        var myArray = [{
            title: "Learning EmberJS",
            author: "Erik Hatchett"
        },{
            title: "Controllers are Dead",
            author: "Frank Treacy"
        },{
            title: "Diddly Doo",
            author: "No I'm Adrian"
        },{
            title: "Yisss",
            author: "Dank Sir"
        }];

        myArray.sort(function(a,b) {
            if (a.author > b.author) {
                console.log(a + " is greater than " + b);
                return 1;
            }
            else {
                console.log(b + " is greater than " + a);
                return -1;
            }
        });

        if ("dat" < "cat") {
            console.log("ayy");
        }

        console.log(myArray[2]);
        return myArray;
    }
});

controllers/practice.js

import Ember from 'ember';

var sortByAuthor = function(a,b) {
            if (a.author > b.author) {
                console.log(a + " is greater than " + b);
                return 1;
            }
            else {
                console.log(b + " is greater than " + a);
                return -1;
            }
        };

var sortByTitle = function(a,b) {
            if (a.title > b.title) {
                console.log(a + " is greater than " + b);
                return 1;
            }
            else {
                console.log(b + " is greater than " + a);
                return -1;
            }
        };



export default Ember.Controller.extend({

    actions: {
        sortAuthors() {
            var myModel = this.get('model');
            console.log(myModel[0].author);
            myModel.sort(sortByAuthor);
            console.log(myModel[0].author);
            this.set('model', myModel);
        },
        sortTitles() {
            var myModel = this.get('model');
            myModel.sort(sortByTitle);
            console.log(myModel[0].title);
            this.set('model', myModel);
        }
    }
});

The information is definitely being sorted and the model is definitely being updated. It just doesn't appear to display the sorted information.




Aucun commentaire:

Enregistrer un commentaire