Javascript Knockout，從值中查找屬性名稱

Question

我有兩個按鈕，按播放器名稱和ID排序。 iam使用兩種函數來進行每種排序。

<ul data-bind="template: { name: 'playerstmpl', foreach: players }"></ul> 
<hr/> 
<button data-bind="click: sortbyPlayer">Sort by Player</button> 
<button data-bind="click: sortbyId">Sort by Id</button> 
<script id="playerstmpl" type="text/html"> 
    <li> <span data-bind = "text: id"> </span> 
     <input data-bind="value: FirstName" /> </li> 
</script> 



<script type="text/javascript"> 

    function Player(id, name) { 
     return { 
      id: ko.observable(id), 
      FirstName: ko.observable(name) 
      }; 
    } 

    var viewModel = { 
     players: ko.observableArray([ 
     new Player(64, "Yuvi"), 
     new Player(22, "Gayle"), 
     new Player(91, "Adam"), 
     new Player(19, "Flintoff"), 
     new Player(56, "Malinga")]) 
    }; 

    viewModel.sortbyPlayer = function() { 
     var unsorted = viewModel.players(); 

     viewModel.players(unsorted.sort(viewModel.sortFunction = function (a, b) { 

     return a.FirstName().toLowerCase() < b.FirstName().toLowerCase() ? -1 : 1; 

     })); 
    }; 


    viewModel.sortbyId = function() { 
     var unsortedId = viewModel.players(); 

     viewModel.players(unsortedId.sort(viewModel.sortFunction = function (a, b) { 
      return a.id() < b.id() ? -1 : 1; 
     })); 
    }; 
      ko.applyBindings(viewModel); 

</script> 

我試着去尋找這是在函數傳遞的特性，這樣我可以合併兩個功能於one..like

viewModel.sortbyPlayer = function() { 
     var unsorted = viewModel.players(); 

     viewModel.players(unsorted.sort(viewModel.sortFunction = function (a, b) { 

      if (Player[a] == "FirstName") {   // is string 
       return a.FirstName().toLowerCase() < b.FirstName().toLowerCase() ? -1 : 1; 
      } 
     else { 
      return a.id() < b.id() ? -1 : 1; 
     } 

     })); 
    }; 

反正有一個功能排序做。謝謝

Answer 1

我會在視圖模型上留下sortByPlayer和sortById這兩個屬性，這樣你的ViewModel就可以清楚你正在展示什麼。接下來，我將創建一個函數來包裝排序邏輯，但允許您傳入一個參數，指出要執行哪種排序（我稱之爲sortFunction）。然後你if陳述正常工作，如果你想有其他屬性進行排序（如果/當你Player對象更改），你甚至可以將它轉換爲switch聲明：

function Player(id, name) { 
    return { 
     id: ko.observable(id), 
     FirstName: ko.observable(name) 
    }; 
} 

var viewModel = { 
    players: ko.observableArray([ 
      new Player(64, "Yuvi"), 
      new Player(22, "Gayle"), 
      new Player(91, "Adam"), 
      new Player(19, "Flintoff"), 
      new Player(56, "Malinga") 
    ]) 
}; 

var sortFunction = function (sortBy) { 
    return function() { 
     var unsortedId = viewModel.players(); 
     viewModel.players(
      unsortedId.sort(function (a, b) { 
       if (sortBy === 'player') { 
        return a.FirstName().toLowerCase() < b.FirstName().toLowerCase() ? -1 : 1; 
       } else { 
        return a.id() < b.id() ? -1 : 1; 
       } 
      }) 
     ); 
    }; 
}; 

viewModel.sortbyPlayer = sortFunction('player'); 
viewModel.sortbyId = sortFunction('id'); 

ko.applyBindings(viewModel); 

Answer 2

如果你正在尋找更通用的分揀功能.. 你可以檢查財產type ..不是它的name。這將爲你的情況，並在更一般的情況下工作：

viewModel.sortbyPlayer = function() { 
    var unsorted = viewModel.players(); 

    viewModel.players(unsorted.sort(viewModel.sortFunction = function (a, b) { 
     if (typeof Player[a] === 'string') {   // is string 
      return a.FirstName().toLowerCase() < b.FirstName().toLowerCase() ? -1 : 1; 
     } 
     if (typeofPlayer[a] === 'number') { 
      return a.id() < b.id() ? -1 : 1; 
     } 

    })); 
}; 

您也可以使用魔法屬性arguments女巫可以訪問它們與功能使用paramethers的數組：

function someFunctionWithRandomParams(){ 
    if(arguments[0]){ 
     console.log('argument 1 of type'+ typeof arguments[0] +' and value'+arguments[0]) 
    } 
    if(arguments[1]){ 
     console.log('argument 2 of type'+ typeof arguments[1] +' and value'+arguments[1]) 
    } 
}