knockout.js custom binding foreach - using ID

Question

I want to create one list which is filtered by Soid

Bascially i have 2 kind of list : 1 Employees, 2 Transactions

Employees got EmpID and Name
Transactions got `ID` , EmpID , and TransDate

I want filter something like this : data-bind="foreach: $data.Transactions(EmpID )"> (

using custom binding , is it possible?

something like this

<table>
        <tbody data-bind="foreach: Employees, visible: Employees().length > 0">  
            <tr>                
                <td class="centerdata" data-bind="text: ID"></td>
                <td class="centerdata" data-bind="text: Name"></td>
                <td>
                   <table>
                       <tbody data-bind="foreach: $data.Transactions">  
                           <tr>   
                              <td data-bind="text:TransDate"></td>
                           </tr>
                       </tbody>
                   </table>
                </td>
            </tr>                    
        </tbody>
   </table>

and this is what i tired : http://jsfiddle.net/bxfXd/2237/

What is the link between Employees and Transactions ? An Employee has a collection of Transaction or a Transaction has an EmployeeID ? Can you share a view model sample ? — Damien, May 31 '13 at 11:06

Damien · Answer 1 · 2013-05-31T13:07:18.387

So, this wil work :

var employees  =  [{EmpID : 0, Name: 'John' }];
var transactions   =  [{ID  : 1, TransDate: '1/1/2013', EmployeeID :0}];

ko.utils.arrayForEach(employees , function(e) {
    e.Transactions = ko.utils.arrayFilter(transactions, function(t){
        return t.EmployeeID == e.EmpID;
    });
});

var VM  = function(){
    var  self = this;
    self.Employees = employees;
    self.getEmployee = function(empID) {
        for(var index = 0; index; self.Employees.length; index++ ) {
        if(self.Employees[index].EmpID == empID)
                return self.Employees[index]
        }
    return null;
    };
};

var vm = new VM();

As you can see this loops through employees and creates an Transactions property which contains all belonged transactions.

And that the view :

<table>
    <tbody data-bind="foreach: Employees, visible: Employees.length > 0">  
        <tr>                
            <td class="centerdata" data-bind="text: ID"></td>
            <td class="centerdata" data-bind="text: Name"></td>
            <td>
               <table>
                   <tbody data-bind="foreach: $data.Transactions">  
                       <tr>   
                          <td data-bind="text:TransDate"></td>
                       </tr>
                   </tbody>
               </table>
            </td>
        </tr>                    
    </tbody>

You don't need to create a custom binding to group the transations by employee. Because the grouping process has already been done by the foreach and the arrayFilter. So, there no need to pass the EmpID. Actually the only thing that does the grouping process is to reconstruct the hierarchy of Employees (as roots) and Transactions (as leafs).

I hope it helps.

Thanks , but i am looking for more information, do i need to create custombinding? and how could i pass, EmpID from data-binding UI ? — vir, May 31 '13 at 11:42
Ok, but is it possible to using custom binding passing empID? if Yes, then help will be highly appreciated:) — vir, May 31 '13 at 12:29
From where should the empID come ? Could you write a fiddle with the custom binding you want to use ? — Damien, May 31 '13 at 12:46
I add a getEmployee function to allow you to get a specific employee. — Damien, May 31 '13 at 13:08
please see my http://jsfiddle.net/bxfXd/2237/ , that i want to trying to do , thanks — vir, May 31 '13 at 13:10

knockout.js custom binding foreach - using ID

1 Answers1