Удаление элементов из карусели с помощью пользовательского интерфейса Onsen

У меня есть простое приложение, использующее пользовательский интерфейс Onsen, и я использую преимущества карусели и обновляю данные в зависимости от того, прокручивает ли пользователь влево или вправо текущий элемент карусели. После того, как они пролистнули, я хотел бы удалить этот элемент из карусели, чтобы они не могли добраться до него снова. Я пытаюсь использовать событие postchange, которое работает нормально, но когда я вызываю carousel.refresh(), карусель не обновляется.

Карусель определяется в html следующим образом:

<ons-carousel var="carousel" swipeable overscrollable auto-scroll fullscreen initial-index="1">
  <ons-carousel-item ng-repeat="foo in bar.baz">
  ....
  </ons-carousel-item>
</ons-carousel>

Поскольку карусель инициализируется на странице, отличной от первой, я добавил обработчик событий, чтобы следить за новой страницей, помещаемой в навигационный контроллер, и если это страница с каруселью, то инициализировать обработчик для событие postchange карусели и обновить некоторые вещи. Я упростил это для случая этого примера.

ons.ready(function(){
  mainNavigator.on('postpush', function(event){
    var page = event.enterPage;
      if (page.name == "carousel_page.html"){
        carousel.on('postchange', function(event){
          $scope.bar.baz.splice(event.lastActiveIndex, 1);
          setImmediate(function(){
            // even setting the array to [] here does not make a difference
            carousel.refresh();
          });
        });
      }
    });
  });

Проходя через все, что я могу проверить, правильно ли обновляется массив за каруселью, и переменная карусели определена нормально, и что вызывается функция refresh (), но моя карусель никогда не обновляется. Что мне здесь не хватает?

Я использую Angular с Onsen, это как-то из-за того, как я добавляю обработчик событий? Это вне цикла $digest или что-то в этом роде?


cordova angularjs onsen-ui
person Kevin    schedule 26.01.2015    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Здесь есть список ошибок... ons-carousel была выпущена в последней версии OnsenUI и была протестирована только для использования со статическим количеством элементов и некоторыми другими функциями, но не таким образом. Все будет исправлено в следующей версии через несколько недель.

Если вы все еще хотите что-то попробовать, это может дать вам некоторые идеи:

$scope.carousel.on('postchange', function(event){
    $scope.$apply(function() {
        $scope.bar.baz.splice(event.lastActiveIndex, 1);
    });
    setImmediate(function(){
        carousel.refresh();
    });
});

Теперь он должен быть удален и обновлен, но из-за некорректного поведения slideDistance может быть неправильным. Чтобы исправить это, вы могли подумать об использовании

$scope.carousel.setActiveCarouselItemIndex($scope.carousel.getActiveCarouselItemIndex());

сразу после carousel.refresh();, но это снова вызовет событие "postchange"...

Чтобы избежать этой проблемы с событием «postchange», вы можете сделать это немного более угловатым:

// Let's do something when the ActiveCarouselItemIndex changes
$scope.$watch(function(){return $scope.carousel.getActiveCarouselItemIndex()}, function(newIndex,oldIndex){
    if (newIndex !== oldIndex) {
        $scope.bar.baz.splice(oldIndex, 1);
        setImmediate(function(){
            $scope.carousel.refresh();
            // Avoid the position problem
            $scope.carousel.setActiveCarouselItemIndex($scope.carousel.getActiveCarouselItemIndex());
        });
    }
});
// Still necessary
$scope.carousel.on('postchange', function(event){
    $scope.$apply();
    return;
});

Это выглядит лучше, чем предыдущее, но все еще немного глючит... вы можете найти способ изменить его и решить проблемы, но, вероятно, проще дождаться следующей версии, в которой она позаботится о динамических каруселях.

Надеюсь, поможет!

person Fran Dios    schedule 27.01.2015
comment
В моем основном контроллере я получаю ошибку "Карусель не определена". - person Junaid Qadir Shekhanzai; 16.07.2015