양방향 바인딩이란 무엇입니까?

양방향 바인딩이란 무엇입니까?

백본이 양방향 바인딩을 하지 않는다는 것을 많이 읽었지만 이 개념을 정확히 이해하지 못합니다.

누가 MVC 코드베이스에서 양방향 바인딩이 어떻게 작동하고 백본에서는 어떻게 작동하지 않는지 예를 들어줄 수 있습니까?

양방향 바인딩은 다음을 의미합니다.

1. 모델의 속성이 업데이트되면 UI도 업데이트됩니다.
2. UI 요소가 업데이트되면 변경 내용이 모델로 다시 전파됩니다.

Backbone에는 #2의 "베이크인" 구현이 없습니다(이벤트 수신기를 사용하여 확실히 수행할 수 있지만).녹아웃과 같은 다른 프레임워크는 양방향 바인딩을 자동으로 연결합니다.

---

Backbone에서는 뷰의 "렌더" 메서드를 모델의 "변경" 이벤트에 바인딩하여 #1을 쉽게 달성할 수 있습니다.달성하기 요소에 하고 #2를 호출해야 .model.set

백본에 양방향 바인딩이 설정된 피들이 있습니다.

양방향 바인딩은 모델에 영향을 미치는 모든 데이터 관련 변경사항이 일치하는 뷰로 즉시 전파되고 뷰(예: 사용자)의 변경사항이 기본 모델에 즉시 반영됨을 의미합니다.앱 데이터가 변경되면 UI도 변경되고 반대로 변경됩니다.

이것은 웹 애플리케이션을 구축하기 위한 매우 견고한 개념입니다. "모델" 추상화를 애플리케이션 내의 모든 곳에서 사용할 수 있는 안전한 원자성 데이터 소스로 만들기 때문입니다.예를 들어, 뷰에 바인딩된 모델이 변경되면 모델과 일치하는 UI(뷰)가 어떤 경우에도 이를 반영합니다.또한 일치하는 UI(보기)를 사용자 입력/데이터 수집 수단으로 안전하게 사용하여 애플리케이션 데이터를 최신 상태로 유지할 수 있습니다.

좋은 양방향 바인딩 구현은 개발자의 관점에서 모델과 일부 뷰 사이의 연결을 가능한 한 단순하게 만들어야 합니다.

백본이 양방향 바인딩을 지원하지 않는다고 말하는 것은 사실이 아닙니다. 프레임워크의 핵심 기능은 아니지만 백본의 이벤트를 사용하여 매우 간단하게 수행할 수 있습니다.단순한 경우에는 몇 줄의 명시적인 코드가 필요하며, 더 복잡한 바인딩에서는 상당히 위험해질 수 있습니다.다음은 간단한 사례입니다(테스트되지 않은 코드, 단지 설명을 위해 즉석에서 작성됨).

Model = Backbone.Model.extend
  defaults:
    data: ''

View = Backbone.View.extend
  template: _.template("Edit the data: <input type='text' value='<%= data %>' />")

  events:
    # Listen for user inputs, and edit the model.
    'change input': @setData

  initialize: (options) ->
    # Listen for model's edition, and trigger UI update
    @listenTo @model, 'change:data', @render

  render: ->
    @$el.html @template(@model.attributes)
    @

  setData: (e) =>
    e.preventDefault()
    @model.set 'data', $(e.currentTarget).value()

model: new Model()
view = new View {el: $('.someEl'), model: model}

이것은 원시 Backbone 응용 프로그램에서 매우 일반적인 패턴입니다.보시다시피 상당한 양의 (꽤 표준적인) 코드가 필요합니다.

AngularJS와 일부 다른 대안(Ember, Knockout...)은 퍼스트 시티즌 기능으로 양방향 바인딩을 제공합니다.그들은 일부 DSL 하에서 많은 에지 케이스를 추상화하고 생태계 내에서 양방향 바인딩을 통합하는 데 최선을 다합니다.AngularJS(테스트되지 않은 코드, 위 참조)의 예는 다음과 같습니다.

<div ng-app="app" ng-controller="MainCtrl">
  Edit the data:
  <input name="mymodel.data" ng-model="mymodel.data">
</div>

angular.module('app', [])
  .controller 'MainCtrl', ($scope) ->
    $scope.mymodel = {data: ''}

짧은 편입니다!

그러나 Backbone에 대해서도 일부 완전한 양방향 바인딩 확장이 존재합니다(복잡성이 감소하는 원시적이고 주관적인 순서로).에폭시, 스틱, 모델 바인더…

예를 들어 Epoxy의 한 가지 멋진 점은 템플릿(DOM) 또는 뷰 구현(JavaScript) 내에서 바인딩(모델 속성 <-> 뷰의 DOM 요소)을 선언할 수 있다는 것입니다.일부 사람들은 DOM/템플릿에 "지시"를 추가하는 것을 매우 싫어합니다(예: AngularJS에서 요구하는 ng-* 속성 또는 Ember의 데이터 바인딩 속성).

Epoxy를 예로 들면 원시 Backbone 애플리케이션을 다음과 같은 애플리케이션으로 재작업할 수 있습니다(…).

Model = Backbone.Model.extend
  defaults:
    data: ''

View = Backbone.Epoxy.View.extend
  template: _.template("Edit the data: <input type='text' />")
  # or, using the inline form: <input type='text' data-bind='value:data' />

  bindings:
    'input': 'value:data'

  render: ->
    @$el.html @template(@model.attributes)
    @

model: new Model()
view = new View {el: $('.someEl'), model: model}

대체로, 거의 모든 "주류" JS 프레임워크는 양방향 바인딩을 지원합니다.Backbone과 같은 일부는 원활하게 작동하기 위해 추가 작업이 필요하지만, 우선 특정 방법을 강제하지 않는 작업은 동일합니다.그래서 그것은 정말로 당신의 심리 상태에 관한 것입니다.

또한 원형 패턴을 통한 단방향 바인딩을 촉진하는 웹 애플리케이션을 위한 다른 아키텍처인 Flux에 관심이 있을 수 있습니다.데이터 변경 시 UI 구성 요소를 전체적으로 신속하게 재렌더링하여 일관성을 보장하고 코드/데이터 흐름에 대해 쉽게 추론할 수 있도록 한다는 개념을 기반으로 합니다.마찬가지로 MVI(모델-뷰-인텐트) 개념(예: 사이클)도 확인할 수 있습니다.

McGarnagle은 훌륭한 답변을 가지고 있고, 여러분은 그의 답변을 받아들이고 싶어하겠지만, 저는 (당신이) 데이터 바인딩이 어떻게 작동하는지에 대해 (질문했기 때문에) 언급할 것이라고 생각했습니다.

일반적으로 데이터가 변경될 때마다 이벤트를 실행하여 구현되며, 이로 인해 수신기(예: UI)가 업데이트됩니다.

양방향 바인딩은 이 작업을 두 번 수행하여 이벤트 루프에 갇히지 않도록 약간의 주의를 기울입니다(이벤트 업데이트로 인해 다른 이벤트가 발생함).

이걸 댓글로 달려고 했는데, 꽤 길어졌어요...

유추에 의한 설명

단방향 데이터 바인딩

한 가지 방법으로 데이터를 묶습니다. 남자가 손을 움직이면 인형의 손이 움직입니다.

즉, "상태"의 변화는 "관"의 변화를 강요할 것입니다. 즉, 인간의 변화는 꼭두각시에게 전파됩니다.

그 사람은 인형을 움직입니다 - 반대로 움직이는 것이 아닙니다.

이것은 한 가지 방법으로 데이터를 바인딩할 수 있습니다.

Alpine JS, Elm, React 등과 같은 인기 있는 프레임워크에서 "반응성"이 던져지는 것을 들어본 적이 있을 것입니다. "상태"를 변경하면 "보기"가 자동으로 변경됩니다.

양방향 데이터 바인딩

뷰의 변경 내용이 모델로 다시 전파됩니다.

예: 군중 속의 누군가가 해골의 손을 흔들어 인형사의 손이 반응하여 움직이도록 합니다. 즉, 양방향 데이터 바인딩입니다.그리고 그것은 voo-doo 마법입니다. (개인적으로, 저는 그것을 좋아하지 않습니다.)2초 정도의 타이핑 시간을 절약할 수 있지만 합법적인 사용 사례가 있습니다.)

프론트 엔드 프레임워크 - 데이터 바인딩의 적용

느릅나무, 리액트 등과 같은 특정 프레임워크를 사용합니다."모델"은 자동으로 변경되지 않습니다. "상태"의 변경을 유도하려면 이벤트 핸들러를 부착해야 합니다.

다른 프레임워크는 "모델"을 업데이트하기 위한 이벤트 처리가 거의 자동으로 수행되는 두 가지 방식의 데이터 바인딩을 제공합니다.기본적으로 이벤트 핸들러를 작성하지 않아도 됩니다(어쨌든 이 작업을 수행해야 함).

요약:.

한 가지 방법: 상태 변화가 뷰에 반영됩니다.

두 가지 방법: 단일 방향 바인딩 외에도 보기의 변경 내용이 "상태"를 변경할 수 있습니다.

당신이 혼란스럽지 않기를 바랍니다: 만약 당신이 댓글을 올리고 있다면.

실제로 자바스크립트 MVC 프레임워크의 가장 강력한 기능 중 하나인 양방향 바인딩을 지원합니다.사용자 가이드에서 언급된 위치를 확인할 수 있습니다.

emberjs의 경우, 양방향 바인딩을 만드는 것은 끝에 Binding 문자열이 있는 새 속성을 만든 다음 글로벌 범위에서 경로를 지정하는 것입니다.

App.wife = Ember.Object.create({
  householdIncome: 80000
});

App.husband = Ember.Object.create({
  householdIncomeBinding: 'App.wife.householdIncome'
});

App.husband.get('householdIncome'); // 80000

// Someone gets raise.
App.husband.set('householdIncome', 90000);
App.wife.get('householdIncome'); // 90000

바인딩은 즉시 업데이트되지 않습니다.Ember는 변경 사항을 동기화하기 전에 모든 응용 프로그램 코드 실행이 완료될 때까지 대기하므로 값이 일시적일 때 바인딩을 동기화하는 오버헤드에 대해 걱정하지 않고 바인딩 속성을 원하는 횟수만큼 변경할 수 있습니다.

선택한 원래 답변의 범위를 넓히는 데 도움이 되기를 바랍니다.

양방향 데이터 바인딩

모델(비즈니스 로직)의 데이터가 변경되면 뷰(html)에 변경사항이 반영되고 뷰의 데이터가 변경되면 모델도 업데이트됩니다.

참고: 이 작업은 즉시 자동으로 수행되므로 모델과 뷰가 항상 업데이트됩니다.

양방향 데이터 바인딩이 필요한 이유는 무엇입니까?

양방향 데이터 바인딩은 실시간 대화형 응용프로그램을 개발하는 데 사용됩니다.이러한 유형의 애플리케이션은 Angular.js, React.js 및 Vue.js와 같은 현대 프레임워크에서 개발된 SPA(Single Page Application)로 알려져 있습니다.

양방향 구속력을 제공하고 매우 효과적으로 작동하는 다양한 솔루션이 있다는 점을 언급할 가치가 있습니다.

저는 이 모델 바인더 https://github.com/theironcook/Backbone.ModelBinder 에서 즐거운 경험을 했습니다.이는 합리적인 기본값을 제공하면서도 입력 요소에 대한 모델 속성의 많은 사용자 지정 jquery 선택기 매핑을 제공합니다.

github에 백본 확장/플러그인의 더 확장된 목록이 있습니다.

레몬에이드JS는 언급할 가치가 있는 또 다른 마이크로 라이브러리입니다.7K바이트이며 양방향 바인딩을 매우 잘 수행합니다.종속성이나 변환 없이 실행할 수 있습니다.

<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<div id='root'></div>
<script>
let Input = function() {
    let self = {
        input: 'paul@beatles.com'
    }
 
    // Any change in the self.input will update the input and vice-versa.
    let template = `<>
        <h1>{{self.input}}</h1>
        <input type='text' @bind='self.input' />
        <input type='button' value='Update' onclick="self.input = 'New value'" />
        </>`
 
    return lemonade.element(template, self);
}

lemonade.render(Input, document.getElementById('root'));
</script>
</html>

출처: https://lemonadejs.net/v2

언급URL : https://stackoverflow.com/questions/13504906/what-is-two-way-binding