Как наблюдать изменения свойств элемента ObservableList - PullRequest
Новая
       155

Как наблюдать изменения свойств элемента ObservableList

0 голосов
/ 30 апреля 2020

Я создаю приложение для покупок во Flutter, используя шаблон MVC и mobx для управления состоянием приложения.

В настоящее время у меня есть магазин mobx для элементов корзины и один магазин для контроллера корзины.

Контроллер корзины имеет ObservableList элементов корзины, и проблема в том, что я не знаю, есть ли способ наблюдения за изменениями в элементах корзины.

Например, я хотел бы наблюдать cartItem.title или cartItem.total.

Есть ли способ отследить это с помощью ObservableList? И что такое метод .observe (), который есть в наблюдаемом списке? (Думаю, документация для меня непонятна)

ОБНОВЛЕНИЕ: ОБРАЗЕЦ КОДА

Как я уже сказал, мне нужно использовать mobx sotres, один для элемента корзины и для сама корзина.

В магазине товаров корзины: 


import 'package:mobx/mobx.dart';

part 'cart-item.model.g.dart';

class CartItemModel = _CartItemModel with _$CartItemModel;

abstract class _CartItemModel with Store {
  int id;
  String title;
  String price;
  String description;

  @observable
  int _quantity = 0;

  @observable
  double _total = 0;

  _CartItemModel({
    this.id,
    this.title,
    this.price,
    this.description,
  }) {
    reaction(
      (_) => _quantity,
      (quantity) {
        getTotal();
      },
    );
  }

  getItemQuantity() => _quantity.toString(); // Return item quantity

  @action
  increase() {
    // Increase item quantity
    if (_quantity <= 99) {
      _quantity++;
    }
  }

  @action
  decrease() {
    // Decrease item quantity
    if (_quantity > 0) {
      _quantity--;
    }
  }

  @action
  getTotal() {
    // Return total price by item quantity
    _total = double.parse(price) * _quantity;
    return _total.toString();
  }
}

А затем в контроллере корзины: 


import 'package:faccioo_user_app/models/cart-item.model.dart';
import 'package:mobx/mobx.dart';

part 'cart.controller.g.dart';

class CartController = _CartController with _$CartController;

abstract class _CartController with Store {

@observable
  ObservableList<CartItemModel> cartItems = ObservableList<CartItemModel>();

  @action
  addItem(CartItemModel item) {
    cartItems.insert(0, (item));
    item.increase();
  }

  @action
  removeItem(CartItemModel item) {
    cartItems.removeWhere((cartItem) => cartItem.id == item.id);
    getTotal();
  }

  @action
  getSubtotal() {
    cartItems.forEach((item) {
      subtotal = subtotal + double.parse(item.getTotal());
    });
    return subtotal.toString();
  }

  @action
  getTotal() {
    total = (subtotal + shippingFee + serviceFee + change) - discount;
    return total.toString();
  }

}

Вид не уведомляется об изменениях в cartItem.total, например ?. Как мне наблюдать изменения в cartItemModel.total из ObservableLis?

Для большей ясности я получил этот отпечаток, в котором мы видим, что количество и общее увеличение количества элементов корзины, поэтому реактивность CartItemModel работает нормально, но контроллер корзины не могу отследить эти изменения из ObservableList, тогда контроллер не обновляет представление.

Я был бы очень признателен за ссылки и ссылки, откуда я могу узнать больше о mobx с Flutter и наблюдаемыми списками.

Просмотр корзины с элементом корзины

...