버튼 클릭시 관찰 가능한 값 바인딩

Question

knockout을 사용하여 JSON을 통해 객체를 수신하고 수신합니다. Javascript 클래스에 바인딩 된 값을 표시하고 편집하는 데 사용되는 양식이 있습니다. 내 양식에 내 값 저장 및 삭제 옵션이 있습니다. 문제는 관찰 된 속성에 값을 입력하고 무시를 클릭하면 값이 웹 서비스로 전송되지 않지만 원하지 않는 "표시 양식"에 저장된다는 것입니다. 버리기를 클릭하면 원래 값이 다시 표시됩니다. 버튼 클릭 이벤트에서 내 값 업데이트를 수행 할 수 있습니까 (예 : '저장'클릭)? 여기 내 현재 코드의 조각 : 나는 이름을 수정하고 나는 새로운 값이 할당되어야 저장을 클릭하면 반면에 복원해야합니다 (이 경우 밥에) 폐기를 원래 값을 클릭하면

jQuery(document).ready(function(){ 
    ko.applyBindings(new MyModel()); 
}); 

function MyModel(){ 
    this.Name = ko.observable("Bob"); 
} 

<div data-bind="text: Name"></div> 
<input type="text" data-bind="value: Name" /> 
<input type="button" onclick="discardChanges()" value="Discard" /> 
<input type="button" onclick="saveChanges()" value="Save" /> 

(예를 들어,이 .Name ("Bill")).

누구든지 내 문제를 해결하는 방법을 알고 있습니까?

Answer 1

당신은 단순히 원본 데이터의 트랙을 유지할 수 :

function MyModel() { 
    var self = this; 
    self.Name = ko.observable("Bob"); 
    var orgData = ko.toJS(self); 
    self.discardChanges = function() { 
     // restore MyModel with the original data (requires the mapping plugin) 
     ko.mapping.fromJS(orgData, self); 
    }; 
} 

그리고 : 아래

<input type="button" data-bind="click: discardChanges" value="Discard" /> 

Answer 2

ko.extension 사용을

var MyModel = function (data) { 
    var self = this; 

    self.Name= ko.observable(''); 

    self.Underscore = ko.Underscore(self); 

    self.Cancel = function() { 
     self.Underscore.Cancel(); 
    } 

    self.Confirm = function() { 
     self.Underscore.Confirm(); 
    } 
}; 

HTML :

<input type="button" data-bind="click: Cancel" value="Discard" /> 
<input type="button" data-bind="click: Confirm" value="Keep" /> 

이 녹아웃 확장, 그것은 각각의 관찰 즉 self.Name의 밑줄 버전() 생성 -> self._Name()

ko.Underscore = function (data) { 
    var obj = data; 
    var result = {}; 
    // Underscore Property Check 
    var _isOwnProperty = function (isUnderscore, prop) { 
     return (isUnderscore == null || prop.startsWith('_') == isUnderscore) && typeof obj[prop] == 'function' && obj.hasOwnProperty(prop) && ko.isObservable(obj[prop]) && !ko.isComputed(obj[prop]) 
    } 
    // Creation of Underscore Properties 
    result.init = function() { 
     for (var prop in obj) { 
      if (_isOwnProperty(null, prop)) { 
       var val = obj[prop](); 
       var temp = '_' + prop; 
       if (obj[prop].isObservableArray) 
        obj[temp] = ko.observableArray(val); 
       else 
        obj[temp] = ko.observable(val); 
      } 
     } 
    }; 
    // Cancel 
    result.Cancel = function() { 
     for (var prop in obj) { 
      if (_isOwnProperty(false, prop)) { 
       var val = obj[prop](); 
       var p = '_' + prop; 
       obj[p](val); 
      } 
     } 
    } 
    // Confirm 
    result.Confirm = function() { 
     for (var prop in obj) { 
      if (_isOwnProperty(true, prop)) { 
       var val = obj[prop](); 
       var p = prop.replace('_', ''); 
       obj[p](val); 
      } 
     } 
    } 
    // Observables 
    result.Properties = function() { 
     var obs = []; 
     for (var prop in obj) { 
      if (typeof obj[prop] == 'function' && obj.hasOwnProperty(prop) && ko.isObservable(obj[prop]) && !ko.isComputed(obj[prop])) { 
       var val = obj[prop](); 
       obs.push({ 'Name': prop, 'Value': val }); 
      } 
     } 
     return obs; 
    } 

    if (obj != null) 
     result.init(); 

    return result; 
}