2017-12-20 25 views
2

속성 이유 : 나는 양식을 다시바운드 모델을 취소하지 않는 양식을 재설정하는 것은 내가 백본 stickit <code>bindings</code>를 사용하여 백본 모델에 형태의 텍스트 입력을 결합했다

bindings: { 
    '#txtRemarks': 'remarks', 
    '#txtFromAccountNumber': 'account_no', 
    '#fileChooser':'fileChooser' 
} 

의의 값 텍스트 입력이 지워지고 있지만 값은 여전히 ​​모델 속성에 있습니다. 입력 요소에 대한

+0

마리오네트는 기본적으로 '바인딩'을 가지고 있지 않습니다. 플러그인이나 이전 버전을 사용하고 있습니까? –

+1

backbone.stickit 플러그인이 사용되었습니다. –

답변

2

Stickit 기본 핸들러는 (source) :

{ 
    selector: 'input', 
    events: ['propertychange', 'input', 'change'], 
    update: function($el, val) { $el.val(val); }, 
    getVal: function($el) { 
     return $el.val(); 
    } 
} 

그것은 'propertychange', 'input', 'change' 수신 및 양식 재설정이 이벤트를 트리거하지 않습니다.

양식의 reset 이벤트를 수동으로 청취하고 수동으로 모델을 업데이트해야합니다.

var FormView = Backbone.View.extend({ 
    bindings: { /* ... */ }, 
    events: { 
     '#form-id reset': 'onReset', 
    }, 
    ui: { 
     remarks: '.remarks-input', 
     account: '.account-input' 
    }, 

    onReset: function(e) { 
     this.model.set({ 
      remarks: this.getUI('remarks').val(), 
      account: this.getUI('account').val(), 
     }); 
    } 
}); 

또는 형태를 다루는 또 다른 트릭은 변경을하기 전에, 초기 상태에서 모델의 복사본을 유지하는 것입니다. 그런 다음 복사본을 사용하여 속성을 재설정하거나 변경 사항이 있는지 확인할 수 있습니다.

var FormView = Backbone.View.extend({ 
    bindings: { /* ... */ }, 
    events: { 
     '#form-id reset': 'onReset', 
    }, 
    initialize: function() { 
     this.master = this.model.clone(); 
    }, 

    onReset: function(e) { 
     this.model.set(this.master.attributes); 
    }, 
    getChanges: function() { 
     return this.master.changedAttributes(this.model.attributes); 
    }, 
    isDirty: function() { 
     return Boolean(this.getChanges()); 
    }, 
});