백본 : 내가 여기에 약간의 문제가 생겼어요

Question

렌더링 후 초점을 복원

을 내 Backbone.js 응용 프로그램에서 내가 흐림 콘텐츠의 변화가 편집 저장합니다. 즉, 탭 키를 누를 때 전체 뷰가 다시 렌더링되고 다음 요소에 포커스가 놓이게됩니다. 이걸 어떻게 복원 할 수 있습니까?

Answer 1

필자는 모든 입력에 대해 전용 ViewModel 및 View를 사용합니다. 요소를 다시 생성하는 대신 요소를 업데이트하는 특별한 readValue/writeValue 메서드가 있습니다. 현재 포커스 요소를 저장하기 위해, 모델 (아래 예와 같이, 일반 속성으로)보기에 중,

var TextInput = Backbone.Model.extend({ // abstract 
    defaults: { 
     value: '', // text 
     visible: true, // determines if input element is visible 
     readonly: false, // determines if input element is read only 
     enabled: true, // determines if input element is enabled 
     delay: 750 // view/model sync latency 
    } 
}); 

var TextInputView = Backbone.View.extend({ 
    template: _.template($('#text-input').html()), 
    initialize: function (options) { 
     this.model.bind('change:visible', this.render, this); 
     this.model.bind('change:readonly', this.render, this); 
     this.model.bind('change:enabled', this.render, this); 
     this.model.bind('change:value', this.readValue, this); 
    }, 
    events: { 
     'change input': 'writeValue', 
     'keyup input': 'writeValue' 
    }, 
    render: function() { 
     $(this.el).html(this.template(this.model)) 
      .find('input') 
       .prop({ 
        readonly: this.model.get('readonly'), 
        disabled: !this.model.get('enabled') 
       }) 
       .toggleClass('hidden', !this.model.get('visible')); 

     this.readValue(); 
     return this; 
    }, 
    changeTimer: null, 
    writeValue: function() { 
     if (this.changeTimer) 
      clearTimeout(this.changeTimer); 

     var that = this; 
     this.changeTimer = setTimeout(function() { 
      that.model.set({ value: that.$('input').val() }); 
     }, this.model.get('delay')); 
    }, 
    readValue: function() { 
     if (this.$('input').val() != this.model.get('value')) 
      this.$('input').val(this.model.get('value')); 
    } 
}); 

Answer 2

당신은 속성을 유지할 수 있습니다 : 그것은이 방법을 보인다. 초점이 바뀔 때마다 속성을 업데이트하십시오.

내용을 다시 렌더링 한 후 수동으로 요소에 포커스를 설정합니다.

var myView = Backbone.View.extend({ 
    el: $('#formElement'), 

    initialize: function() { 
     _.bindAll(this); 
    } 

    events: { 
     'focus input': "updateFocus" 
    }, 

    updateFocus: function(event) { 
     this.focusedElem = $(event.target); 
    }, 

    render: function() { 
     // After rendering is complete 
     this.focusedElem.focus(); 
    } 
}); 

Answer 3

나는 그것을 렌더링 후 "다음"요소에 가고 싶어 발견 :

여기에 최소한의 코드입니다. 또한 JQuery에서 DOM에서 제거되는 요소를 기억할 수 없습니다. 그래서 입력 자체 대신 입력의 이름을 기록합니다. 이전 답변을 결합하면 아래와 비슷한 것을 할 수 있습니다. 입력시 이름과 필드 집합 내에서 검색하는 것과 같은 몇 가지 가정이 있음을 기억하십시오.

getNextInputForName = function(desiredName) { 
     var desiredElement = false; 
     var foundElement; 
     $("fieldset input").each(function(index) { 
      if (desiredElement) { 
       foundElement = $(this); 
       return false; 
      } 
      if ($(this).attr("name") === desiredName) { 
       desiredElement = true; 
      } 
     }); 
     return foundElement; 
    } 

    var myView = Backbone.View.extend({ 
     el: $('#formElement'), 

     initialize: function() { 
     _.bindAll(this); 
     } 

     events: { 
     'focus input': "updateFocus" 
     }, 

     updateFocus: function(event) { 
     this.focusedElem = $(event.target).attr("name"); 
     }, 

     render: function() { 
     // After rendering is complete 
     if(this.focusedElem) { 
      getNextInputForName(this.focusedElem).focus(); 
     } 
     } 
    });