css - 如何让 Ember.js 绑定(bind) Attr 刷新？

Question

我正在尝试创建“排序依据”按钮，这些按钮在使用 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， Handlebars :1.0.0-rc.3

Answer 1

如果您希望您的 View 对 Controller 中发生的任何事情使用react，您应该创建计算属性(通过 fn(){}.property('dependency') )。但是，为了使计算属性正常工作，您需要使用 Ember 的 get()和 set()属性访问器。

在你的代码中你正在做类似的事情

this.IsActive = this.Controller != null && 
                this.Controller.isSortedBy(this.Predicate);

当你应该做这样的事情时:

this.set('active',
     this.get('controller') != null &&
     this.get('controller').isSortedBy(this.get('Predicate'))
);

您可能已经注意到这段代码设置一个值到active，但是模板正在监听isActive。该属性已更改为计算属性:

isActive: function() {
    return this.get('active');
}.property('active')

它会监听 active 属性的变化，每当发生这种情况时，它都会缓存新值，并通知所有订阅者对象刷新/更新。

指示使用 Ember 的 get 和 set 访问器，以便正确使用使事件链成为可能的可观察对象。

我已在适当的地方应用 get 和 set 修改了您的示例。你可以在这个 fiddle 中看到它: http://jsfiddle.net/schawaska/fRMYu/