Javascript 渲染不起作用后，我是否误解了它的工作原理？

这是我的代码：

 <div data-bind="foreach : {data:movies}, afterRender: $parent.toggleHide ">
    <div class="content-item full bottom-border">
    <div class="content-item-container">



              <div class="movie-listing-header">

            <a class="icon arrow"></a>

            <div class="movie-details">
                <div class="title"><a href="#" data-bind="text: MovieName, attr: { href: DetailsUrl }"></a></div> 
                <div class="info">
                    <div class="rating">
                    </div>
                    <div class="time" data-bind=" text: movieruntime "></div>
                </div>
            </div>
            <a class="icon right-arrow" href="#" data-bind="attr: { href: DetailsUrl }"></a>


</div>

<div class="showtimes">    



              <div data-bind="template: { name: 'movie-grouped-showtimes-template', data: $data }"></div>

        </div>


</div>
</div>
   </div>

---

我的标记已填充，但javascript无法隐藏和显示同级

电影和切换隐藏在viewModel的同一级别上定义？这是正确的，这是错误的吗？我不太熟悉这项技术显示您完整的viewModel，似乎您定义的viewModel道具不正确

     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.computedMovies = ko.computed(function () {
   //         var theseMovies = [];
   //         ko.utils.arrayForEach(self.movies, function (movie) {
   //             movie.isActive = ko.observable(false);
   //             movie.isSelected = ko.observable(false);
   //             theseMovies.push(movie);
   //         });
   //         return theseMovies;
  //      });
  //      self.toggleClass = function (sender) {
   //         sender.isActive(!sender.isActive());


        //      }


        self.toggleHide = function () {

            $('.icon.arrow').click(function () {
                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();
                    }
                });

            });
        }

    }

    window.Regal.TheatreViewModel = TheatreViewModel;