외부 배열을 기반으로 한 계산 된 속성 knockout JS

Question

방금 ​​knockout으로 시작하여 복수형 과정을 시작했습니다.

나는 그것이 my.vm.attendees의 각 항목에 대한 Amount 속성은 항상 totalCost이다 수로 나눈 너무 작동하게 할 방법을 아래에 코드를 감안할 때 : 나는 상위 배열을 기반으로 계산 된 재산에 대한 (아마도 기본) 질문이 있습니다 참석자 수 예 : 각 컬렉션의 참석자 4 명은 25 명이어야합니다. 항목을 추가하거나 제거 할 때 자동으로 업데이트되어야합니다.

<script type="text/javascript"> 
    $(function() { 
     var total = 100; 

     //Attendee construction 
     my.Attendee = function() { 
      this.Name = ko.observable(); 
      this.Amount = ko.computed(function() { 
       return total/this.numberOfAttendees; 
      }, my.vm); 
     }; 

     my.vm = { 
      //observable array of attendees 
      attendees: ko.observableArray([new my.Attendee()]), 
      addAttendee: function() { 
       my.vm.attendees.push(new my.Attendee()); 
      }, 
      numberOfAttendees: function() { 
       my.vm.attendees.lenght + 1; //zero based 
      } 
     } 

     ko.applyBindings(my.vm); 
    }); 
</script> 

Answer 1

아마도 이런 식으로 할 것입니다.

function attendee(name, amount) { 
 
    var self = this; 
 
    this.name = ko.observable(name); 
 
    this.amount = ko.observable(amount); 
 
} 
 

 
function model() { 
 
    var self = this; 
 
    this.attendees = ko.observableArray(); 
 
    this.total = ko.computed(function() { 
 
    var total = 0; 
 
    ko.utils.arrayForEach(this.attendees(), function(item) { 
 
     var value = parseFloat(item.amount()); 
 
     if (!isNaN(value)) { 
 
     total += value; 
 
     } 
 
    }); 
 
    return total.toFixed(2); 
 
    }, this); 
 
    this.average = ko.pureComputed(function() { 
 
    return self.total()/self.attendees().length; 
 
    }, this); 
 
    this.remove = function(row) { 
 
    self.attendees.remove(row); 
 
    } 
 
    this.name = ko.observable(''); 
 
    this.amount = ko.observable(''); 
 
    this.add = function() { 
 
    self.attendees.push(new attendee(self.name(), self.amount())); 
 
    self.amount(''); 
 
    self.name(''); 
 
    } 
 
} 
 

 
var mymodel = new model(); 
 

 
$(document).ready(function() { 
 
    ko.applyBindings(mymodel); 
 
    mymodel.attendees.push(new attendee('Bob', 25)); 
 

 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-condensed"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Amount</th> 
 
     <td>Delete</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: attendees"> 
 
    <tr> 
 
     <td data-bind="text:name"></td> 
 
     <td data-bind="text:amount"></td> 
 
     <td> 
 
     <button class="btn btn-danger" data-bind="click: $parent.remove"> 
 
      X 
 
     </button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    <tfooter> 
 
    <tr> 
 
     <td colspan=2>Average: 
 
     <span data-bind="text:average"> 
 
     </span> 
 
     </td> 
 
    </tr> 
 
    </tfooter> 
 
</table> 
 

 
<form class="form form-inline"> 
 
    <label class="sr-only" for="inlineFormInput">Name</label> 
 
    <input type="text" class="form-control" id="inlineFormInput" placeholder="enter name" data-bind="textInput: name"> 
 

 
    <label class="sr-only" for="inlineFormInputGroup">Amount</label> 
 
    <div class="input-group "> 
 
    <div class="input-group-addon">$</div> 
 
    <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="amount" data-bind="textInput: amount"> 
 
    </div> 
 

 

 
    <button type="buttont" class="btn btn-primary" data-bind="click: add">add row </button> 
 
</form>

Answer 2

계산 된 "금액"은 하위 관찰 항목이 업데이트 될 때마다 다시 계산됩니다. 따라서 변경을 트리거하려면 "합계"를 관측 가능으로 설정해야하며 my.vm.attendees가 업데이트 될 때 업데이트 할 수 있도록 "numberOfAttendees"를 계산해야합니다. 계산 된 "Amount"의 업데이트로 케스케이드 될 수 있습니다.