녹아웃 기능에서 관찰 가능 액세스

Question

이 문제에 대해 혼란스러워합니다. 녹아웃은 ko.applyBindings() 메서드를 사용하여 MVVM 패턴을 업데이트합니다. 아래 코드에서 내 기능을 볼 수 있습니다. 먼저 비어있는 vm을 만든 다음 getJSON() 메서드를 통해 데이터를 채우는 다른 함수를 호출합니다. 메소드가 잘 작동합니다. 내 혼란은 여기서 시작

var vm = {}; 
function GetData(){ 
    vm=GetMockData(); 
    LoadUserData(); 
    LoadCategories(); 
    LoadSkills(); 
    return vm; 
} 

, 내 작업은 사용자의 입력에 따라이 값을 저장하는 것입니다.

<input data-bind='' placeholder="Enter your name"/> 

상위 HTML 섹션에서 해당 값을 원하는대로 바인딩하고 싶습니다. GetMockData().obj.User.Name. 하지만 일하지 않아.

function GetMockData(){ 
    var obj={ 
     User:{ 
      Name: ko.observable().extend({ 
       required: true, 
       minLength: 2, 
       maxLength: 15 
      }), 
      Surname: "Fake Surname" 
     } 
    return obj; 
} 

그리고 applyBindings()에 대해서는 아래 코드 섹션을 호출합니다.

ko.applyBindings(new GetData()); 

아래 부분에서는 혼란 스럽습니다. 어떤 함수에서 User.Name을 얻으려면 다른 함수에서 호출해야합니다. 왜냐하면 그 부분을 applyBindings()이 아닌 다른 함수에서 직접 전달하기 때문입니다. 데이터 바인딩 값을 HTML에 쓰려면 어떻게해야합니까?

<input data-bind='' placeholder="Enter your name"/> 

Answer 1

는 처음에 나는 당신이 실제로 여기에지고 있었는지에 의해 매우 혼란스러워했다. 이 시점에서도 나는 아직도 확실하지 않습니다. 그러나 여기 당신을 도우려는 나의 최선의 시도가 있습니다.

당신이 해결하고자하는 주요 문제는 내가 이해하는 바와 같이 "수화"의 문제입니다. 어떤 것을 다른 것으로 채우기 위해 느리게 실행되는 프로세스입니다. 뭔가의 상태를 "재설정"하는 수단으로 볼 수도 있습니다. 다음은이 문제를 해결할 수있는 방법에 대한 간단한 예입니다.

자바 스크립트는 이제 꼼짝 자바 스크립트 측면을 가지고

function User() { 
    var self = this; 

    self.Name = ko.observable().extend({ 
     required: true, 
     minLength: 2, 
     maxLength: 15 
    }); 

    self.Surname = ko.observable(); 

    self.Hydrate = function(){ 
     self.Surname("Fake SureName"); 
    }; 
}; 

function AppModel(){ 
    var self = this; 

    self.User = {}; 

    self.Hydrate = function(){ 
     var user = new User(); 
     user.Hydrate(); 
     self.User = user; 
    }; 
}; 

var app = new AppModel(); 
app.Hydrate(); 
ko.applyBindings(app); 

,의는 DOM로 이동하자. 텍스트 필드에서 사용자로부터 입력을 받으려면 두 가지 기본 옵션 인 value과 textInput이 있어야합니다. value은 블러 이벤트에서 관찰 가능 항목을 업데이트합니다 (textInput). 가장 잘 봉사하는 사람을 결정할 수 있습니다.

HTML

<input data-bind="textInput: User.Name" placeholder="Enter your name"/> 

그것은 당신이이 솔루션을 확장 할 찾고 있다면, 그것은 당신의 클래스의 프로토 타입에보기 모델 함수 (하지 관찰 가능한)를 적용하는 것이 가장주의하는 것이 중요합니다. 그래서 같이 : 코드보고에서 보조 노트로

function AppModel(){ 
    var self = this; 

    self.User = {}; 
}; 

AppModel.prototype.Hydrate = function(){ 
    var self = this; 

    var user = new User(); 

    self.User(user); 
}; 

, 당신이 녹아웃 솔루션을 "조립"하는 방법에 대한 약간의 이해가 부족 있습니다 보인다. 나는 건축술의 더 나은 감을 얻기 위하여 녹아웃 웹 사이트에 제안 된 tutorials 체크 아웃을 매우 추천 할 것입니다. 또한이 녹아웃 팀의 일원 인 Ryan Niemeyer에 의한 video은 낡았지 만 여전히 매우 관련이 있습니다.