KnockoutJS清除函数中的Observable

Question

My Razor View is as follows:

<div id="allMessages" data-bind="foreach: messages">
    <!-- ko if: $root.filterMessageTime($data.MessageDate) -->
           //Show some messages
    <!-- /ko -->
</div>
<div data-bind="visible: lastHourCount() > 1 && selectedFilterMessageTime() == 'Last Hour'">
    <p><span class="h4" data-bind="text: lastHourCount()"></span> messages in the <span class="h4">last hour</span>.</p>
</div>
<div data-bind="visible: lastHourCount() == 0 && selectedFilterMessageTime() == 'Last Hour'">
    <p>No new messages in the <span class="h4">last hour</span>.</p>
</div>

My Knockout function is as follows:

function ViewModel() {
    var self = this;
    var count = 0;

    self.lastHourCount = ko.observable(0);
    self.lastDayCount = ko.observable(0);
    self.lastWeekCount = ko.observable(0);
    self.lastMonthCount = ko.observable(0);

    self.filterMessageTime = function (MessageDate) {
        //Reset Expression
        if (count == self.messages().length) {
            count = 0;
            self.lastHourCount(0);
            self.lastDayCount(0);
            self.lastWeekCount(0);
            self.lastMonthCount(0);
        }
        if (self.selectedFilterMessageTime() == 'Any' || self.selectedFilterMessageTime() == null) {
            return true;
        }
        count = count + 1;
        if (self.selectedFilterMessageTime() == 'Last Hour') {
            if (((MessageDate.indexOf('minute') >= 0) || (MessageDate.indexOf('hour') >= 0)) && (MessageDate.indexOf('hours') == -1)) {
                self.lastHourCount(self.lastHourCount() + 1);
                return true;
            }
            else
                return false;
        }
        else if (self.selectedFilterMessageTime() == 'Last Day') {
            if (((MessageDate.indexOf('day') >= 0) || (MessageDate.indexOf('hours') >= 0) || (MessageDate.indexOf('hour') >= 0) || (MessageDate.indexOf('minute') >= 0)) && (MessageDate.indexOf('days') == -1)) {
                self.lastDayCount(self.lastDayCount() + 1);
                return true;
            }
            else
                return false;
        }
        else if (self.selectedFilterMessageTime() == 'Last Week') {
            if ((MessageDate.indexOf('days') >= 0) || (MessageDate.indexOf('day') >= 0) || (MessageDate.indexOf('hours') >= 0) || (MessageDate.indexOf('hour') >= 0) || (MessageDate.indexOf('minute') >= 0)) {
                self.lastWeekCount(self.lastWeekCount() + 1);
                return true;
            }
        else
                return false;
        }
        else if (self.selectedFilterMessageTime() == 'Last Month') {
            if ((MessageDate.indexOf('month') >= 0) || (MessageDate.indexOf('days') >= 0) || (MessageDate.indexOf('day') >= 0) || (MessageDate.indexOf('hours') >= 0) || (MessageDate.indexOf('hour') >= 0) || (MessageDate.indexOf('minute') >= 0)) {
                self.lastMonthCount(self.lastMonthCount() + 1);
                return true;
            }
            else
                return false;
        }
        return false;
    };
}

Methodology:

For each user message that I have, if a user specifies a filter then:

1. Count the number of messages in that filter range based on the passed in MessageDate and have them available in an observable, ie self.lastMonthCount() will hold the amount of messages in the last month
2. When the count reaches the total amount of messages we would like to reset the count as well as the observable counters so that the observable counts don't roll over any values.

Problem:

It seems as though I have some form of circular dependencies on my observables as there are issues when running the function ie the 'reset' expression never properly evaluates and it seems as though the function loops with an large number (greater than the amount of messages) in the Observables.

Notes:

• When replacing the observables with regular variables everything works fine, naturally I have no data-binds in my view which is no good.
• If I re-declare my Observables in the reset expression then it solves my issues but again my previously bound Observables will not receive updates from the newly created Observables, again no good.
• I have also tried setting the Observables to null and undefinied .

Answer 1

You are doing this the wrong way around.

If you have a view model with a list of objects and you want to make them filterable, all you need to do is

• add an observable that holds the active filter condition
• add a computed that holds the filtered list
• base your view entirely on the filtered list

The rest will follow naturally.

function ViewModel() {
    var self = this;

    self.availableFilters = ['any', 'last hour', 'last day', 'last week', 'last month'];
    self.activeFilter = ko.observable(self.availableFilters[0]);
    self.allMessages = ko.observableArray([/* ... fill this ... */]);

    self.filteredMessages = ko.pureComputed(function () {
        return self.filterMessages(self.activeFilter());
    });
    self.filteredMessagesCount = ko.pureComputed(function () {
        return self.filteredMessages().length;
    });

    self.filterMessages = function (filter) {
        return ko.utils.arrayFilter(self.allMessages(), function (message) {
            var d = message.Date();
            switch (filter) {
                case 'any':        return true;
                case 'last hour':  return (d.indexOf('minute') >= 0 || d.indexOf('hour') >= 0) && d.indexOf('hours') == -1;
                case 'last day':   return (d.indexOf('day') >= 0 || d.indexOf('hours') >= 0 || d.indexOf('hour') >= 0 || d.indexOf('minute') >= 0) && d.indexOf('days') == -1;
                case 'last week':  return d.indexOf('days') >= 0 || d.indexOf('day') >= 0 || d.indexOf('hours') >= 0 || d.indexOf('hour') >= 0 || d.indexOf('minute') >= 0;
                case 'last month': return d.indexOf('month') >= 0 || d.indexOf('days') >= 0 || d.indexOf('day') >= 0 || d.indexOf('hours') >= 0 || d.indexOf('hour') >= 0 || d.indexOf('minute') >= 0;
                default:           return false;
            }
        });
    };
}

and

<select data-bind="options: availableFilters, value: activeFilter"></select>

<div id="allMessages" data-bind="foreach: filteredMessages">
    // show the message
</div>
<div>
    <p>
        <!-- ko if: filteredMessagesCount -->
        <span class="h4" data-bind="text: filteredMessagesCount"></span> messages
        <!-- /ko -->

        <!-- ko ifnot: filteredMessagesCount -->
        No new messages
        <!-- /ko -->

        <!-- ko ifnot: activeFilter() === 'any' -->
        in the <span class="h4" data-bind="text: activeFilter"></span>
        <!-- /ko -->
    </p>
</div>

---

That being said, your method of filtering messages (via multiple indexOf() calls) isn't very pretty.

How about a regex-based one:

function ViewModel() {
    var self = this;

    self.availableFilters = [
        {name: 'any',        include: /./, exclude: null},
        {name: 'last hour',  include: /minutes?|hour/i,  exclude: /hours|days?|weeks?|months?/i},
        {name: 'last day',   include: /minutes?|hours?|day/i,   exclude: /days|weeks?|months?/i},
        {name: 'last week',  include: /minutes?|hours?|days?|week/i,  exclude: /weeks|months?/i},
        {name: 'last month', include: /minutes?|hours?|days?|weeks?|month/i, exclude: /months/i}
    ];
    self.activeFilter = ko.observable(self.availableFilters[0]);
    self.allMessages = ko.observableArray([/* ... fill this ... */]);

    self.filteredMessages = ko.pureComputed(function () {
        return self.filterMessages(self.activeFilter());
    });
    self.filteredMessagesCount = ko.pureComputed(function () {
        return self.filteredMessages().length;
    });

    self.filterMessages = function (filter) {
        return ko.utils.arrayFilter(self.allMessages(), function (message) {
            var d = message.Date();
            return filter.include && filter.include.test(d) &&
                   !(filter.exclude && filter.exclude.test(d));
        });
    };
}

and

<select 
    data-bind="options: availableFilters, optionsText: 'name', value: activeFilter"
></select>

The rest of the view is the same, except that references to activeFilter() must change to activeFilter().name .