Javascript 使用Knockout.js绑定和viewmodel单击事件未完全工作

嗨，这是我的代码片段：

self.arrow = function () {

    alert("button clicked");
    var active_el = $(this);

    $('.movie-listing-header').each(function () {
        if ($(this).get(0) === active_el.parent().get(0)) {
            if ($(this).hasClass('active')) {
                $(this).siblings('.showtimes').hide();
            } else {
                $(this).siblings('.showtimes').show();
            }
            $(this).toggleClass('active');
        } else {
            $(this).removeClass('active');
            $(this).siblings('.showtimes').hide();
        }
    });
}

它是我的viewmodel的一部分，单击的alertbutton可以工作，但代码的其余部分不能。。。以下是按钮单击代码：

  <a class="icon arrow" data-bind="click: $parent.arrow"></a>

我觉得var active_el=$这不是您所期望的。我没有运行代码，但我相信在这种情况下，这将是self。然而，我想推荐一个更基本的MVVM更改。我建议在视图模型上设置属性，而不是包含所有这些jQuery代码来更新UI。下面是一个简化的示例：

HTML

这将使JavaScript对HTML中的更改不那么脆弱

 function TheatreViewModel(theatre) {
        var self = this,
            initialData = theatre || Regal.userPrimaryTheatre || {},
            theatreServiceParams = {
                tmsId: initialData.TmsId,
                date: initialData.selectedDate || new Date()
            };

        self.TheatreName = initialData.TheatreName || '';
        self.PhoneNumber = initialData.PhoneNumber || '';
        self.selectedTheatreTms = initialData.TmsId;
        self.theatre = ko.observable();
        self.isLoading = ko.observable(false);
        self.selectedDate = ko.observable(initialData.selectedDate || new Date());

        self.filterFormats = [];

        self.selectedFormat = ko.observable(Regal.allFormatsFilterItem);
        self.filterFormats.push(Regal.allFormatsFilterItem);
        if (Regal.movieFormats) {
            var filtered = _.where(Regal.movieFormats, {
                Filterable: true
            });
            _.forEach(filtered, function(f) {
                f.enabled = ko.observable(false);
                self.filterFormats.push(f);
            });
        }

        self.addressText = ko.computed(function() {
            var theat = ko.unwrap(self.theatre);
            var addie;
            if (!theat || theat && !theat.Address1) {
                addie = initialData;
            } else {
                addie = theat;
            }

            return addie.Address1 + ', ' + addie.City + ' ' + addie.State + ' ' + addie.PostalCode;
        });

        self.mapEmbedUrl = ko.computed(function() {
            var a = self.addressText();
            return 'http://maps.google.com/maps?q=' + encodeURI(a);
        });

        self.movies = ko.computed(function() {
            var thea = self.theatre(),
                mov = ko.unwrap((thea || {}).Movies),
                format = self.selectedFormat();

            if (format && format !== Regal.allFormatsFilterItem) {
                return _.filter(mov, function(m) {
                    return _.contains(_.pluck(m.formats(), 'Id'), format.Id);
                });
            }
            return mov;
        });

        self.getPerformances = function() {
            self.isLoading(true);
            Regal.loadTheatre(self.selectedDate(), self.selectedTheatreTms,
                function(data) {
                    self.isLoading(false);
                    if (data) {

                        var allFmts = _.uniq(_.flatten(_.map(ko.unwrap(data.Movies), function(mov) {
                            return mov.formats();
                        })));
                        _.forEach(allFmts, function(fmt) {
                            var filt = _.findWhere(self.filterFormats, {
                                Id: fmt.Id
                            });
                            if (filt) {
                                filt.enabled(true);
                            }
                        });
                        self.theatre(data);
                    }

                });
        };
        self.changeFormat = function(format) {
            console.log(format);
            self.selectedFormat(format);
            self.movies();

        };


        self.selectedDate.subscribe(function(newVal) {
            self.getPerformances();
        });


        self.getPerformances();

        self.arrow = function () {
            alert("button clicked");
            var active_el = $(this);
            $('.movie-listing-header').each(function () {
                if ($(this).get(0) === active_el.parent().get(0)) {

                    if ($(this).hasClass('active')) {
                        $(this).siblings('.showtimes').hide();
                    } else {
                        $(this).siblings('.showtimes').show();
                    }
                    $(this).toggleClass('active');

                } else {
                    $(this).removeClass('active');
                    $(this).siblings('.showtimes').hide();
                }
            });
        }

    }

<section data-bind="foreach: movies">
    <article>
        <div data-bind="if: displayShowtimes">
            <!-- ... show times UI -->
        </div>
    </article>
</section>

self.arrow = function (movie) {
    movie.isActive(!movie.isActive());
}