Question

I am using knockout.js lib to bind data.
Let’s I have next example
JSFiddle Example

I have table with data. Table have columns order –

Name – LastName – Middlename – Age
and i have 4 functions

var namePosition = function()

var lastnamePosition = function()

var middlenamePosition = function()

var agePosition = function()  

i want bind order of columns in table to values that are returned by this functions.
For example
namePosition returns 4
lastnamePosition returns 2
middlenamePosition returns 1
agePosition returns 3
then table shouls have next column order –
Middlename – LastName – Age – Name.
Have you any ideas, how can I do it? (using knockout or jquery)

Answer 1

What Diodeus said is a good way to go. You can generate order array using those functions:

var order = [];
order[namePosition()] = "name";
order[lastnamePosition()] = "last";
order[middlenamePosition()] = "middle";
order[agePosition()] = "age";

// order===["middle", "last", "age", "name"]

And then set order observableArray property to your object, using aforementioned order at creation as initial value.

Last thing is to bind cells order and text to new values:

<table>
   <thead>  
     <tr data-bind="foreach:order">
       <td data-bind="text:$root.headers[$data]"></td>
    </tr>
 </thead>
  <tbody data-bind="foreach:users">   
    <tr data-bind="foreach:$root.order">
        <td><span data-bind="text:$parent[$data]"></span></td>
    </tr>
  </tbody>
</table>

Info about $root and $parent.

With current approach you can change columns order dynamically by code like this:

model.order(["name", "last", "age", "middle"])

Example here: http://jsfiddle.net/Klaster_1/Pw2VE/1/