넉 아웃 JS - 계산 된 값

Question

나는 Knockout에서 신규입니다. 나는 예제에서 찾을 수있는 한 가지 트릭을 이해할 수 없다. 여기 내 코드. 나는 3 명의 사용자를 만들었고, 아래는 제 3의 사용자를 만들 때 내 처리 결과를 보여줍니다.

// It's my view 
<div id="page-container"> 

<input type="text" data-bind="value: usernameInput" /> 
<button data-bind="click: addPerson">Добавить</button> 

<ul data-bind="foreach: users"> 
    <li data-bind="text: username"></li> 
</ul> 

</div> 

<script> 
// It's my UserModel 
function UserModel(username, callback){ 
    console.log('Start creating object...'); 
    var self = this; 
    self.username = ko.observable(username); 
    self.updateCallback = ko.computed(function(){ 
     console.log('updateCallback: ' + self.username()); 
     callback(self); 
     return true; 
    }); 
}; 

// It's my ViewModel 
function ViewModel(){ 
    var self = this; 
    self.users = ko.observableArray([]); 
    self.usernameInput = ko.observable(''); 

    self.addPerson = function(){ 
     var u = self.usernameInput(); 
     var um = new UserModel(u, self.update); 
     self.users.push(um); 
     console.log('Item Pushed'); 

     self.usernameInput(''); 
     console.log('Users Collection: ' + self.users()); 
    }; 

    self.update = function(item){ 
     console.log('Update: ' + item.username()); 
     ko.utils.arrayFilter(self.users(), function(it) { 
     }); 
    }; 
}; 

ko.applyBindings(new ViewModel(), document.getElementById('page-container')); 

그것은 내 콘솔 출력의

.

Start creating object... 
updateCallback: 3 
Update: 3 
updateCallback: 1 
Update: 1 
updateCallback: 2 
Update: 2 
updateCallback: 3 
Update: 3 
Item Pushed 
Users Collection: [object Object],[object Object],[object Object] 

내가

Start creating object... 
updateCallback: 3 
Update: 3 

을 이해 해요하지만이 부분 난 updateCallback 컨텍스트의 업데이트 방법 안에이 함수를 호출 할 때 : 모든 들어

ko.utils.arrayFilter(self.users(), function(it) { 
}); 

계산 된 updateCallback 3 회 사용자 ...

누구나 "손가락에"왜 설명 할 수 있습니까? 답장을 사전에 이런 일이 ... 감사합니다 ...

f_martinez

계산하여 updateCallback가 전체 사용자 observableArray에 따라 달라집니다 때문입니다. 이 종속성은 암시 적 보일 수 있지만, 콜백을 통해 (자기) 만들어지는; ...을

예 ...이 종속성은 암시 적입니다 ...하지만이 종속성은 아직 나를 위해 분명하지 않다

때 루프 업데이트을 다음과 같이 사용하십시오. for (var i in self.users()) {} 모든 사용자에 대해 updateCallback이 3 번 계산됩니다 ...하지만 루프를 제거하고 세 번째 사용자를 생성하면 ... 이 출력 만 가져옵니다.

Start creating object... 
updateCallback: 3 
Update: 3 
Item Pushed 
Users Collection: [object Object],[object Object],[object Object] 

계산하여 updateCallback가 전체 users observableArray에 의존하기 때문에 10

나는

Answer 1

그건 ... updateCallback이 observableArray ... 난 단지 간단한 빈 루프를 사용하고 내부에 아무것도 변경 해달라고하고 전체 사용자에 따라 방법을 이해하지 못할. 이 종속성은 암시 적 보일 수 있지만 스택의 다음 수준에서 표현이있는 callback(self);를 통해 만들어지는 :

ko.utils.arrayFilter(self.users(), ...)` 

당신은 또한 내부 계산 새로 만들 때마다 새로운 사용자로하고 계산이 배열에 따라 달라집니다. 따라서 배열에 두 명의 사용자가 있으면이 배열의 모든 변경 사항이 두 개의 계산을 트리거한다는 것을 의미합니다.

그럼 세 번째 사용자 추가

1. 생성자 하나 이상의 계산 작성 생성 (출력 3) 직후 평가하고
2. 배열 변화와 이전에 생성 된 모든 computeds 평가 다시 (출력 1, 2, 3).

업데이트

당신이 관찰 또는 observableArray 계산 또는하지를 변경하면 아무리. observables와 observable array는 사실 함수입니다. 그래서 만약 당신이 호출하면이 호출은 의존성을 만들기 위해 추적됩니다.

그리고 이것은 전체 녹아웃의 정말로 시원하고 간단한 개념입니다. 그런데 공식적인 KO 문서에 good article about dependency tracking가 있습니다.

Answer 2

나는 이해합니다! 설명하려고하자!

몇 가지 유용한 예제를 추가했습니다. 벨로우즈보세요!

먼저

<div id="page-container"> 

    <input type="text" data-bind="value: usernameInput" /> 
    <button data-bind="click: addPerson">Add</button> 
    <button data-bind="click: pushObject">Dependency</button> 

    <ul data-bind="foreach: users"> 
     <li data-bind="text: username"></li> 
    </ul> 

</div> 

<script> 

    function UserModel(username, dependency){ 
     console.log('Start creating object...'); 
     var self = this; 
     self.username = ko.observable(username); 
     self.updateCallback = ko.computed(function(){ 
      console.log(username); 
      dependency(); 
      return self.username(); 
     }); 
    }; 

    function ViewModel(){ 
     var self = this; 
     self.dependency = ko.observableArray([]); 

     self.users = ko.observableArray([]); 
     self.usernameInput = ko.observable(''); 

     self.addPerson = function(){ 
      var u = self.usernameInput(); 
      var um = new UserModel(u, self.dependency); 
      self.users.push(um); 
      console.log('Item pushed'); 
      self.usernameInput(''); 
     }; 

     self.pushObject = function(){ 
      self.dependency.push({}); 
     }; 
    }; 

</script> 

내 콘솔 출력 : 두 번째

Start creating object... 
1 
Item pushed 
Start creating object... 
2 
Item pushed 
Start creating object... 
3 
Item pushed 
1 
2 
3 

:

<div id="page-container"> 

    <input type="text" data-bind="value: usernameInput" /> 
    <button data-bind="click: addPerson">Add</button> 
    <button data-bind="click: setString">Dependency</button> 

    <ul data-bind="foreach: users"> 
     <li data-bind="text: username"></li> 
    </ul> 

</div> 

<script> 

    function UserModel(username, dependency){ 
     console.log('Start creating object...'); 
     var self = this; 
     self.username = ko.observable(username); 
     self.updateCallback = ko.computed(function(){ 
      console.log(username); 
      dependency(); 

      return self.username(); 
     }); 
    }; 

    function ViewModel(){ 
     var self = this; 
     self.users = ko.observableArray([]); 
     self.usernameInput = ko.observable(''); 

     self.dependency = ko.observable(); 

     self.addPerson = function(){ 
      var u = self.usernameInput(); 
      var um = new UserModel(u, self.dependency); 
      self.users.push(um); 
      console.log('Item pushed'); 
      self.usernameInput(''); 
     }; 

     self.setString = function(){ 
      self.dependency(''); 
     }; 
    }; 

</script> 

내 콘솔 출력은 :

Start creating object... 
1 
Item pushed 
Start creating object... 
2 
Item pushed 
Start creating object... 
3 
Item pushed 
1 
2 
3 

나는 항목 전에 다시 계산 값은 사용자 컬렉션 밀어 생각하고 있습니다. 그러나 사실 그것의 계산 된 항목은 사용자 컬렉션을 밀어 넣었습니다. 그것은 핵심 포인트입니다! 그리고 공부를위한 2 좋은 예!

f_martinez 감사합니다.