녹아웃보기 모델에 대한 변경 감지

녹아웃보기 모델에 대한 변경 감지

---

물론 이것은 대답하기 매우 쉬운 질문이지만 녹아웃 뷰 모델의 속성이 변경되었는지 확인하는 쉬운 방법이 있습니까?

---

익스텐더 사용 :

ko.extenders.trackChange = function (target, track) {
    if (track) {
        target.isDirty = ko.observable(false);
        target.originalValue = target();
        target.setOriginalValue = function(startingValue) {
            target.originalValue = startingValue; 
        };
        target.subscribe(function (newValue) {
            // use != not !== so numbers will equate naturally
            target.isDirty(newValue != target.originalValue);
        });
    }
    return target;
};

그때:

self.MyProperty= ko.observable("Property Value").extend({ trackChange: true });

이제 다음과 같이 검사 할 수 있습니다.

self.MyProperty.isDirty()

변경된 사항이 있는지 확인하기 위해 일반적인 viewModel 순회를 작성할 수도 있습니다.

self.isDirty = ko.computed(function () {
    for (key in self) {
        if (self.hasOwnProperty(key) && ko.isObservable(self[key]) && typeof self[key].isDirty === 'function' && self[key].isDirty()) {
            return true;
        }
    }
});

... 그런 다음 viewModel 수준에서 확인하십시오.

self.isDirty()

---

모니터링 할 속성을 구독 할 수 있습니다.

myViewModel.personName.subscribe(function(newValue) {
    alert("The person's new name is " + newValue); 
});

personName이 변경되면 경고합니다.

좋습니다. 모델이 변경되면 알고 싶습니다.

var viewModel = … // define your viewModel

var changeLog = new Array();  

function catchChanges(property, value){
    changeLog.push({property: property, value: value});
    viewModel.isDirty = true;
}

function initialiseViewModel()
{
    // loop through all the properties in the model
    for (var property in viewModel) {

        if (viewModel.hasOwnProperty(property)) { 

            // if they're observable
            if(viewModel[property].subscribe){

                // subscribe to changes
                viewModel[property].subscribe(function(value) {
                    catchChanges(property, value);
                });
            }
        }
    }
    viewModel.isDirty = false;
}

function resetViewModel() {
    changeLog = new Array();  
    viewModel.isDirty = false;
}

(테스트하지는 않았지만 아이디어를 얻어야합니다)

---

Knockout-Validation 플러그인 사용 고려

다음을 구현합니다.

yourProperty.isModified ()-사용자가 값을 수정했는지 확인합니다.

yourProperty.originalValue-값이 실제로 변경되었는지 확인할 수 있습니다.

유용한 다른 유효성 검사 항목과 함께!

건배

---

이를 위해 아래 플러그인을 사용할 수 있습니다.

https://github.com/ZiadJ/knockoutjs-reactor

예를 들어 코드를 사용하면 모든 viewModel 내의 모든 변경 사항을 추적 할 수 있습니다.

ko.watch(someViewModel, { depth: -1 }, function(parents, child) { 
    alert('New value is: ' + child());
});

추신 : 현재 이것은 배열 내에 중첩 된 구독 가능 항목에서 작동하지 않지만이를 지원하는 새 버전이 진행 중입니다.

업데이트 : 샘플 코드는 배열 항목 및 구독 가능한 속성에 대한 지원을 추가하는 v1.2b에서 작동하도록 업그레이드되었습니다.

---

나는 같은 문제가 있었고, 데이터를 서버로 다시 보내기 위해 viewModel의 변경 사항을 관찰해야했습니다. 누군가가 여전히 간섭한다면 나는 약간의 조사를했고 이것이 가장 좋은 해결책입니다.

function GlobalObserver(viewModel, callback) {  
    var self = this;
    viewModel.allChangesObserver = ko.computed(function() {
        self.viewModelRaw = ko.mapping.toJS(viewModel);
    });
    viewModel.allChangesObserver.subscribe(function() {
        callback(self.viewModelRaw);
    });
    self.dispose = function() {
        if (viewModel.allChangesObserver)
            viewModel.allChangesObserver.dispose();
        delete viewModel.allChangesObserver;
    };
};

이 '전역 관찰자'를 사용하려면 :

function updateEntireViewModel() {
    var rawViewModel = Ajax_GetItemEntity(); //fetch the json object..    
    //enter validation code here, to ensure entity is correct.
    if (koGlobalObserver)
        koGlobalObserver.dispose(); //If already observing the older ViewModel, stop doing that!
    var viewModel = ko.mapping.fromJS(rawViewModel);        
    koGlobalObserver = new GlobalObserver(viewModel, Ajax_Submit);
    ko.applyBindings(viewModel [ ,optional dom element]);   
}

Note that the callback given (in this case 'Ajax_Submit') will be fired on ANY change that occurs on the view model, so i think it's really recommended to make some sort of delay mechanism to send the entity only when the user finished to edit the properties:

var _entitiesUpdateTimers = {};

function Ajax_Submit(entity) { 
    var key = entity.ID; //or whatever uniquely related to the current view model..
    if (typeof _entitiesUpdateTimers[key] !== 'undefined')
        clearTimeout(_entitiesUpdateTimers[key]);    
    _entitiesUpdateTimers[key] = 
        setTimeout(function() { SendEntityFunction(entity); }, 500);           
}

I'm new to JavaScript and the knockout framework, (only yestarday i started to work with this wonderfull framework), so don't get mad at me if i did something wrong.. (-:

Hope this helps!

---

I've adapted @Brett Green code and extended it so that we can have AcceptChanges, marking the model as not dirty plus having a nicer way of marking models as trackables. Here is the code:

var viewModel = {
    name: ko.observable()   
};

ko.track(viewModel);

http://jsfiddle.net/david_freire/3HZEu/2/

---

I did this by taking a snapshot of the view model when the page loads, and then later comparing that snapshot to the current view model. I didn't care what properties changed, only if any changed.

Take a snapshot:

var originalViewModel = JSON.stringify(ko.toJS(viewModel));

Compare later:

if(originalViewModel != JSON.stringify(ko.toJS(viewModel))){
    // Something has changed, but we don't know what
}

---

Consider a view model as follows

function myViewModel(){
    var that = this;
    that.Name = ko.observable();
    that.OldState = ko.observable();
    that.NewState = ko.observable();

    that.dirtyCalcultions - ko.computed(function(){
    // Code to execute when state of an observable changes.
});
}

After you Bind your Data you can store the state using ko.toJS(myViewModel) function.

myViewModel.Name("test");
myViewModel.OldState(ko.toJS(myViewModel));

You can declare a variable inside your view model as a computed observable like

that.dirtyCalculations = ko.computed(function () {});

This computed function will be entered when there is change to any of the other observables inside the view model.

Then you can compare the two view model states as:

that.dirtyCalculations = ko.computed(function () {
  that.NewState(that);

  //Compare old state to new state
  if(that.OldState().Name == that.NewState().Name()){
       // View model states are same.
  }
  else{
      // View model states are different.
  }

});

**Note: This computed observable function is also executed the first time when the view model is initialized. **

Hope this helps ! Cheers!!

참고URL : https://stackoverflow.com/questions/10622707/detecting-change-to-knockout-view-model