0

Ember.js を使用してクリックすると、並べ替えと css クラスを変更する「並べ替え」ボタンを作成しようとしています。

ソート部分と初期クラス割り当ては機能しますが、依存プロパティを更新してもクラス割り当ては更新されません。

私は何が欠けていますか?

これは私のHTMLにあります:

<script type="text/x-handlebars" data-template-name="sort-option-item">
    <dd {{bindAttr class="IsActive:active IsDesc:reversed"}}
        {{action sortBy on="click"}}><a href="#">{{Name}}</a></dd>
</script>

<script type="text/x-handlebars">
    {{#each option in controller.sortOptions}}
        {{view App.SortOptionView controllerBinding="option"}}
    {{/each}}
</script>

これは私のJavascriptにあります:

var App = null;

$(function () {

    App = Ember.Application.create();

    // Define Types:

    App.SortOptionCtrl = Ember.Controller.extend({
        Name: null,
        Predicate: null,
        Controller: null,
        IsActive: false,
        IsDesc: false,
        sortBy: function () {
            if (this.Controller != null)
                this.Controller.sortBy(this.Predicate);
        },
        Check: function () {
            this.IsActive = this.Controller != null
                            && this.Controller.isSortedBy(this.Predicate);
            this.IsDesc = this.Controller != null
                          && this.Controller.isSortedDescBy(this.Predicate);
            // adding an alert(this.IsActive); here
            // proves that the function is indeed called and works as expected
        }
    });

    App.ProductsController = Ember.ArrayController.extend({

        initialized: false,
        content: [],
        viewContent: [],
        sortProperties: ['Order'],
        sortAscending: true,
        sortOptions: [],

        initialize: function () {

            if (this.initialized == true)
                return;

            this.initialized = true;
            var ctrl = this;

            this.sortOptions.pushObject(App.SortOptionCtrl.create({
                Name: 'Unsorted',
                Predicate: null,
                Controller: ctrl,
            }));
            this.sortOptions.pushObject(App.SortOptionCtrl.create({
                Name: 'By Name',
                Predicate: 'Name',
                Controller: ctrl,
            }));
            this.sortOptions.pushObject(App.SortOptionCtrl.create({
                Name: 'By Date',
                Predicate: 'Date',
                Controller: ctrl,
            }));

            this.sortOptions.forEach(function (opt) { opt.Check(); });
        },

        load: function () {

            this.initialize();
            // ....
        },

        sortBy: function (predicate) {

            var prevPredicate = this.sortProperties[0];

            if (predicate == prevPredicate && predicate != null) {
                this.sortAscending = !(this.sortAscending);
            }
            else {
                this.sortAscending = true;
            }

            this.sortProperties.length = 0;

            if (predicate)
                this.sortProperties.pushObject(predicate);
            else
                this.sortProperties.pushObject('Order');

            this.sortOptions.forEach(function (opt) { opt.Check(); });
        },

        isSortedBy: function (predicate) 
        {
            if (predicate == null)
                predicate = 'Order';

            var activePredicate = this.sortProperties[0];

            if (predicate == activePredicate) {
                return true;
            }
            else {
                return false;
            }
        },

        isSortedDescBy: function (predicate) {

            if (predicate == null)
                predicate = 'Order';

            var activePredicate = this.sortProperties[0];

            if (predicate == activePredicate) {
                if (this.sortAscending)
                    return false;
                else
                    return true;
            }
            else {
                return false;
            }
        },

    });

    App.SortOptionView = Ember.View.extend({
        templateName: 'sort-option-item'
    });

    // Create Instances:

    App.productsController = App.ProductsController.create({
    });

    App.productsController.load();

    App.initialize();
});

バージョン: Ember: 1.0.0-rc.2、ハンドルバー: 1.0.0-rc.3

4

2 に答える 2