Javascript KnockoutJs更新计数器后过滤器

我有许多过滤器：

FilterMessageTime = Filter on message time
FilterCommentTime = Filter on comment time
FilterCommentStatus = Filter on comment status
FilterExcludeWithoutComments = Filter messages without comments

有了这些过滤器（以及它们的各种组合），我想保持邮件

filteredmessagetimecount

和评论

filteredCommentsTimeCount

的恒定计数

我有以下看法：

            <div style="display: inline-block">
                <label class="LabelDropdownPopup" for="FilterMessageTime" data-bind="visible: selectedFilterMessageTime">Message Time: </label>
                <select class="Filters" id="FilterMessageTime" title='Message Time' data-max-options="1"
                        data-bind="
                        options: FilterMessageTime,
                        optionsText : 'name',
                        optionsValue: 'name',
                        value: selectedFilterMessageTime
                        "></select>
            </div>
            <br />
            <div data-bind="visible: $root.filteredMessagesTimeCount() > 0">
                <div style="display: inline-block">
                    <label class="LabelDropdownPopup" for="FilterCommentTime" data-bind="visible: selectedFilterCommentTime">Comment Time: </label>
                    <select class="Filters" id="FilterCommentTime" title='Comment Time' data-max-options="1"
                            data-bind="
                        options: FilterCommentTime,
                        optionsText : 'name',
                        optionsValue : 'name',
                        value: selectedFilterCommentTime
                        "></select>
                </div>
                <br />
                <div style="display: inline-block">
                    <label class="LabelDropdownPopup" for="FilterCommentStatus" data-bind="visible: selectedFilterCommentStatus">Comment Status: </label>
                    <select class="Filters" id="FilterCommentStatus" title='Status' data-max-options="1"
                            data-bind="
                        options: FilterCommentStatus,
                        optionsText : 'name',
                        optionsValue : 'name',
                        value: selectedFilterCommentStatus"></select>
                </div>
                <br />
            </div>
                <div style="display: inline-block">
                    <label class="LabelDropdownPopup" for="FilterExcludeWithoutComments" data-bind="visible: selectedFilterExcludeWithoutComments">Only show messages with comments: </label>
                    <select class="Filters" id="FilterExcludeWithoutComments" title='Only show messages with comments' data-max-options="1"
                            data-bind="
                        options: FilterExcludeWithoutComments,
                        optionsText : 'name',
                        optionsValue : 'name',
                        value: selectedFilterExcludeWithoutComments"></select>
                </div>
                <br />
        </div>

        <div id="allMessages" data-bind="foreach: filteredMessagesTime, updateCounters: filteredMessagesTime">
            <div class="messageHolder" data-bind="visible: $root.showAllComments(MessageComments), afterRender: $root.updateMCCounters">
                <div class="messageSection">
                    /*Message...*/
                </div>
                <div class="commentSection">
                    <ul class="ulIterator" data-bind="foreach: $root.filteredCommentsTime(MessageComments), updateCounters: $root.filteredCommentsTime(MessageComments)">
                            /*Comments...*/
                    </ul>
                </div>
            </div>
        </div>
 <div >
            <p>
                <!-- ko if: filteredMessagesTimeCount() == 1 -->
                Total <span class="h4" data-bind="text: filteredMessagesTimeCount"></span> message
                <!-- /ko -->
                <!-- ko if: filteredMessagesTimeCount() > 1 -->
                Total <span class="h4" data-bind="text: filteredMessagesTimeCount"></span> messages
                <!-- /ko -->
                <!-- ko ifnot: filteredMessagesTimeCount -->
                No messages
                <!-- /ko -->
                <!-- ko ifnot: selectedFilterMessageTime() === 'Any' -->
                in the <span class="h4" data-bind="text: selectedFilterMessageTimeOption().name"></span>.
                <!-- /ko -->
                <br />
                <!-- ko if: filteredCommentsTimeCount() == 1 -->
                Total <span class="h4" data-bind="text: filteredCommentsTimeCount"></span> comment
                <!-- /ko -->
                <!-- ko if: filteredCommentsTimeCount() > 1 -->
                Total <span class="h4" data-bind="text: filteredCommentsTimeCount"></span> comments
                <!-- /ko -->
                <!-- ko ifnot: filteredCommentsTimeCount -->
                No comments
                <!-- /ko -->
                <!-- ko ifnot: selectedFilterCommentTime() === 'Any' -->
                in the <span class="h4" data-bind="text: selectedFilterCommentTimeOption().name"></span>.
                <!-- /ko -->
            </p>
        </div>

现在，过滤和显示方面的一切都很好。此外，当我应用

FilterMessageTime

或

FilterCommentTime

过滤器时，我会收到正确的消息和评论计数

问题是： 应用

过滤器ExcludeWithoutComments

过滤器时，收到的结果不一致。我试图解释。。。消息

FilteredMessageTimeCount

和注释

filteredCommentsTimeCount

计数器将显示以前选择的结果，但当前结果是错误的。这意味着如果我有4条消息和2条注释显示，

FilteredMessageTimeCount

将显示6条（我编造的），而

filteredCommentsTimeCount

将显示4条（我编造的）…在下一次过滤器迭代期间，即再次切换过滤器，然后，我将获得上一个选择的正确结果，即

FilteredMessageTimeCount

=4和

filteredCommentsTimeCount

=2

由于我的计数器是一个“哑”CSS元素计数器，因此执行状态非常重要……因此我认为发生的情况是，计数器在元素更改（被隐藏）之前触发

在元素被隐藏后，我如何让计数器开火？这完全是错误的做法吗

对于后者，我知道我可以使用

pureComputed

返回

FilteredMessageTimeCount

，即：

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

我可以为其他三个过滤器做类似的事情吗

如果你已经做到这一点，我感谢你，欢迎任何反馈

：）

**更新，my.js安装示例

//模型

function Message(data) {
     var self = this;
     data = data || {};
     self.MessageComments = ko.observableArray([]);
     if (data.MessageComments) {
        var mappedComments = $.map(data.MessageComments, function (item) {     return new Comment(item); });
        self.MessageComments(mappedComments);
      }}

function viewModel() {
     var self = this;
     //As per my original post, the JS 'section' 
     //goes here with the addition of how my messages are loaded updated below
self.loadMessages = function () {
    var token = $("input[name='__RequestVerificationToken']").val();
    var headers = {};
    headers['__RequestVerificationToken'] = token;
    return $.ajax({
        url: messageUrl,
        dataType: "json",
        contentType: "application/json",
        cache: false,
        type: 'GET',
        headers: headers,
        async: false,
        })
        .done(function (data) {
            var mappedMessages = $.map(data, function (dataItem) {
                return new Message(dataItem);
            });
            self.messages(mappedMessages);
        })
        .fail(function () {
            self.error('unable to load messages');
        });
}}

更新

function Message(data, commentFilterTimeDelegate) {
var self = this;
data = data || {};
self.MessageComments = ko.observableArray([]);


self.filteredCommentsTime = ko.computed(function () {
    var filter = commentFilterTimeDelegate;
    var filterToReturn = ko.utils.arrayFilter(self.MessageComments(), function (comment) {
        var d = comment.CommentDate;
        return filter.include && filter.include.test(d) &&
                !(filter.exclude && filter.exclude.test(d));
    });
    return filterToReturn;
}); 
if (data.MessageComments) {
    var mappedComments = $.map(data.MessageComments, function (item) { return new Comment(item); });
    self.MessageComments(mappedComments);
}}

//视图模型片段

            .done(function (data) {
            var mappedMessages = $.map(data, function (dataItem) {
                //return new Message(dataItem);
                return new Message(dataItem, self.selectedFilterCommentTime());
            });
            self.messages(mappedMessages);
        })

更新

function Message(data, commentFilterTimeDelegate) {
var self = this;
data = data || {};
self.MessageComments = ko.observableArray([]);


self.filteredCommentsTime = ko.computed(function () {
    var filter = commentFilterTimeDelegate;
    var filterToReturn = ko.utils.arrayFilter(self.MessageComments(), function (comment) {
        var d = comment.CommentDate;
        return filter.include && filter.include.test(d) &&
                !(filter.exclude && filter.exclude.test(d));
    });
    return filterToReturn;
}); 
if (data.MessageComments) {
    var mappedComments = $.map(data.MessageComments, function (item) { return new Comment(item); });
    self.MessageComments(mappedComments);
}}

剃须刀

---

注释的筛选属于消息级别。。。问题是将过滤器降到如此低的程度，这样您就可以正确地使用它们，而不必使用全局变量或其他可怕的东西

对于这种情况，我通常将“委托”传递到我的对象中，该对象指向根级别viewModel上的可观察对象。。。这是一个很好的OO实践，因为嵌套的消息对象不应该知道它所在的容器（在这里不要使用全局变量……JS总是很诱人）

一旦设置完成，消息的计数就很容易了（发生在根目录下）。total comments count of total comments是所有messages.filteredMessageComments的聚合计数，可以在根目录下通过迭代计算得到

下面是一个仅使用文本框（即没有选项/下拉列表）的简化示例，但应采用相同的方法

**小提琴：**

**HTML:**

Name Filter: <input type="text" data-bind="value: MessageNameFilter">
Comment Filter: <input type="text" data-bind="value: MessageCommentFilter">
<br />
Message Count: <div data-bind="text: FilteredMessageCount" ></div>
Comment Count: <div data-bind="text: FilteredCommentCount" ></div>
<br />
<div data-bind="foreach: FilteredMessages">
    <div data-bind="text: MessageName"></div>
    <div data-bind="foreach: FilteredMessageComments">
        <div data-bind="text: Comment" style="padding-left: 10px;"></div>
    </div>
</div>

---

很难准确理解您遇到的问题。一把小提琴会有帮助。我想说的第一件事是，您的viewModel不应该进行任何DOM操作或查询。。。这是个坏兆头。您应该只维护DOM，并且您的计数应该来自Computed。看起来你走对了。嗨，布雷特，谢谢你的回复。编一把小提琴有点难（但并非不可能）。我会尽力澄清；DOM操作来自

visible

绑定，即

什么是MessageComments，它来自哪里？我看不出有什么定义。我怀疑你在做一些根本错误的事情。。。MessageComments是您的JSON，包含您正在处理的所有数据。这应该只是传递到您的viewModel中，您应该将其包装在observableArray中。。。然后一切都会从那开始。不应该从view/html“传入”该数据。我想事情就是这样，但仍然不清楚MessageComments是什么。Brett，为延误道歉，我同意，有点不对劲。不幸的是，我的包装的observable（MessageComments）位于我的.js文件中的一个单独函数中，即见更新的问题。然后，我将如何在我的
视图模型中引用它呢？
？最终获得足够的时间查看它。因此，我已经设置了我的代理，并且非常确定我正在收集您所记录的内容，并且当第一次通过（网页加载）时，评论会显示（选择的过滤器为-All），但是当我更新我的
selectedFilterCommentTime
（通过我的下拉菜单），它根本不会触发KO，即没有更新发生…请检查我最新的edit.Ps。我还没有尝试计数（因此省略了
filteredmessagecommentscont
），我想先让实际的注释过滤工作起来。：）传入时是取消引用，因此实际上是传递筛选器的值，而不是指针。去掉括号，只传递函数本身。当你在内部使用它时，你会被计算，然后你会去引用它。在那里，它应该是filter（）添加了一个特定的，虽然简化了的示例。。。也许这会有帮助。谢谢Brett，通过你之前的评论和最近的例子，我终于能够克服我的问题了。再次感谢！
<ul class="ulIterator" data-bind="foreach: filteredCommentsTime">

function Message(data, commentFilterTimeDelegate) {
...
    self.FilterCommentTime = [
    { 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: /and|weeks?|months?/i },
    { name: 'Last Month', include: /minutes?|hours?|days?|weeks?|month/i, exclude: /months/i }
];

self.filteredCommentsTime = ko.computed(function () {
    var test = commentFilterTimeDelegate();
    var filter = ko.utils.arrayFirst(self.FilterCommentTime, function (item) {
        return item.name === commentFilterTimeDelegate().name;
    });

    var filterToReturn = ko.utils.arrayFilter(self.MessageComments(), function (comment) {
        var d = comment.CommentDate;
        return filter.include && filter.include.test(d) &&
                !(filter.exclude && filter.exclude.test(d));
    });
    return filterToReturn;
});
}

function viewModel() {
...
    self.FilterCommentTime = [
    { 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: /and|weeks?|months?/i },
    { name: 'Last Month', include: /minutes?|hours?|days?|weeks?|month/i, exclude: /months/i }
];
self.selectedFilterCommentTime = ko.observable(self.FilterCommentTime[0]);
...
            .done(function (data) {
            var mappedMessages = $.map(data, function (dataItem) {
                //return new Message(dataItem);
                return new Message(dataItem, self.selectedFilterCommentTime);
            });
            self.messages(mappedMessages);
        })
...
}

Name Filter: <input type="text" data-bind="value: MessageNameFilter">
Comment Filter: <input type="text" data-bind="value: MessageCommentFilter">
<br />
Message Count: <div data-bind="text: FilteredMessageCount" ></div>
Comment Count: <div data-bind="text: FilteredCommentCount" ></div>
<br />
<div data-bind="foreach: FilteredMessages">
    <div data-bind="text: MessageName"></div>
    <div data-bind="foreach: FilteredMessageComments">
        <div data-bind="text: Comment" style="padding-left: 10px;"></div>
    </div>
</div>

var MessagesData = [
    {
    MessageName: 'Message One',
    MessageComments: [
        {Comment: 'Comment One'},
        {Comment: 'Comment Two'},
        {Comment: 'Comment Three'}
        ]
    },
    {
    MessageName: 'Message Two',
    MessageComments: [
        {Comment: 'Comment One'},
        {Comment: 'Comment Two'},
        {Comment: 'Comment Three'}
        ]
    },
    {
    MessageName: 'Message Three',
    MessageComments: [
        {Comment: 'Comment One'},
        {Comment: 'Comment Two'},
        {Comment: 'Comment Three'}
        ]
    }];


var MessageComment = function(msgComment) {
    var self = this;
    self.Comment = ko.observable(msgComment.Comment);
};

var Message = function(msg, commentFilter) {
    var self = this;
    self.MessageName = ko.observable(msg.MessageName);
    self.MessageComments = ko.observableArray();
    $.each(msg.MessageComments, function(i, m) {
        self.MessageComments.push(new MessageComment(m));
    });
    self.FilteredMessageComments = ko.computed(function() {
        var results = [];
        $.each(self.MessageComments(), function(i, mc){
            // using the injected comment filter function (an observable)
            // filter the comments accordingly
            if (mc.Comment().indexOf(commentFilter()) !== -1){
                results.push(mc);
            }
        });
        return results;
    });
};

var vm = function(messages) {
    var self = this;
    self.MessageNameFilter = ko.observable('');
    self.MessageCommentFilter = ko.observable('');
    self.Messages = ko.observableArray();
    $.each(messages, function(i, m) {
        // inject the comment filter so we can filter comments
        // inside the messages object
        self.Messages.push(new Message(m, self.MessageCommentFilter));
    });
    self.FilteredMessages = ko.computed(function() {
        var results = [];
        $.each(self.Messages(), function(i, m){
            if (m.MessageName().indexOf(self.MessageNameFilter()) !== -1){
                results.push(m);
            }
        });
        return results;
    });
    // This is easy, just count your filtered messages:
    self.FilteredMessageCount = ko.computed(function() {
        return self.FilteredMessages().length;
    });
    // For this one, iterate over the filtered messages and count
    // the filtered comments
    self.FilteredCommentCount = ko.computed(function() {
        var val = 0;
        $.each(self.FilteredMessages(), function(i, m){
            val += m.FilteredMessageComments().length;
        });
        return val;
    });

};

var vm = new vm(MessagesData);
ko.applyBindings(vm);