다트 언어 : 관찰 가능

Question

HTML 파일에 두 개의 테이블 행이 있습니다. 첫 번째 행이 클릭되면 class.add ("active_style")를 통해 스타일이 변경됩니다. 두 번째 행이 클릭되면 첫 번째 행 스타일을 지우고 싶습니다.

난 그냥 쓸 수 있다는 것을 알고

은 ...

querySelector("#first_row_div").classes.clear();

은 ... 첫 번째 행 클래스를 취소 (다음의 스타일을 재설정)하지만, 더 큰 코드하기 위해 나는 관찰 할 것이라고 생각합니다 가장 잘 맞는다.

관측 가능 여부가 확실하지 않습니다. 그러나, 만약 그렇다면 어떻게 할 수 있습니까?

EDIT/UPDATE : 올바른 질문은 "변수가 변경되면 함수를 실행할 수있는 방법이 있습니까?"라고 생각합니다.

도움 주셔서 감사합니다.

Answer 1

필드에 대한 getter/setter를 만들고 setter에서 함수를 실행할 수 있습니다.

class MyClass { 

    String _cssClass; 
    String get cssClass => _cssClass; 
    set cssClass(String newClass) { 
    _cssClass = newClass; 
    updateDom(); 
    } 

    void updateDom() { 
    // do important work here 
    } 
} 

당신은 Observable를 확장하는 모델 클래스를 사용할 수 있습니다. 여기 dirtyCheck()으로 전화하여 Observable이 변경 사항을 확인하고 수신자에게 알리도록해야합니다.

다트는 또한 ChangeNotifier 믹스 인을 제공합니다. 여기서 더티 체크를위한 메소드를 호출 할 필요가 없습니다. 변경이 이루어지면 리스너가 호출됩니다. 기능

import 'package:observe/observe.dart'; 

class Notifiable extends Object with ChangeNotifier { 
    String _input = ''; 

    @reflectable 
    get input => _input; 

    @reflectable 
    set input(val) { 
    _input = notifyPropertyChange(#input, _input, val + " new"); 
    } 

    Notifiable() { 
    this.changes.listen((List<ChangeRecord> record) => record.forEach(print)); 
    } 
} 

class MyObservable extends Observable { 
    @observable 
    String counter = ''; 

    MyObservable() { 
    this.changes.listen((List<ChangeRecord> record) => record.forEach(print)); 
    } 
} 

void main() { 
    var x = new MyObservable(); 
    x.counter = "hallo"; 
    Observable.dirtyCheck(); 

    Notifiable notifiable = new Notifiable(); 
    notifiable.input = 'xxx'; 
    notifiable.input = 'yyy'; 
}