2016-10-11 4 views
2

Можно ли обнаружить, когда наблюдаемые изменения каким-либо образом?Обнаруживать, когда изменился mobx наблюдаемый

Например, у вас есть это:

@observable myObject = [{id: 1, name: 'apples'}, {id: 2, name: 'banana' }] 

И позже, с некоторым пользовательского ввода, значения меняются. Как я могу это легко обнаружить?

Я хочу добавить глобальную кнопку «сохранить», но сделать ее кликабельной, только если эта наблюдаемая изменилась с начальной загрузки.

Мое текущее решение состоит в том, чтобы добавить еще один наблюдаемый myObjectChanged, который возвращает true/false, и везде, где компонент изменяет данные в myObject, я также добавляю строку, которая изменяет myObjectChanged на true. И если щелкнуть кнопку сохранения, это сохранит и изменяет, что наблюдается обратно к false.

Это приводит к множеству дополнительных строк кода, посыпанных повсюду. Есть ли лучший/более чистый способ сделать это?

+1

Я чувствую, что вы можете использовать любой из 'computed',' наблюдать ',' spy' или 'autorun' здесь в зависимости от уровня детализации, который вам нужен в вашем наблюдении. Здесь есть простой пример грязной проверки формы с помощью 'computed' https://github.com/mobxjs/mobx/issues/164 – m0meni

ответ

2

Вы можете использовать autorun для достижения этой цели:

@observable myObject = [{id: 1, name: 'apples'}, {id: 2, name: 'banana' }] 
@observable state = { dirty: false } 

let firstAutorun = true; 
autorun(() => { 
    // `JSON.stringify` will touch all properties of `myObject` so 
    // they are automatically observed. 
    const json = JSON.stringify(myObject); 
    if (!firstAutorun) { 
    state.dirty = true; 
    } 
    firstAutorun = false; 
}); 
+0

Это работает очень хорошо, спасибо! Одна маленькая вещь, однако, заключается в том, что firstAutorun следует пустить, поскольку const не позволит ему перейти на false. – user3245789

+0

К сожалению, теперь исправлено! –

0

Создать действие, которое будет толкать к MyObject и установить myObjectChanged

@action add(item) { 
    this.myObject.push(item); 
    this.myObjectChanged = true; 
} 
Смежные вопросы