viewmodelプロパティを使用してナビゲーション位置を表す

Question

viewmodelプロパティを使用してナビゲーション位置を表す必要があります。

<div class="col-3"> 
    <ul class="folders" data-bind="foreach: folders"> 
     <li data-bind="text: $data, 
     css: { selected: $data == $root.chosenFolderId() }, 
     click: $root.goToFolder"></li> 
    </ul> 
</div> 
<div class="col-6"> 
    <!-- Mails grid --> 
    <table class="mails"> 
     <thead> 
     <tr> 
      <th>Title</th> 
     </tr> 
     </thead> 
     <tbody data-bind="foreach: chosenFolderData"> 
     <tr data-bind="click:$root.goToFolder"> 
     <td data-bind="text: Title"></td> 
     </tr>  
     </tbody> 
    </table> 
</div> 

ユーザがアイテムをクリックするたびに、私はgoToItemsList関数を呼び出します。私のgoToItemsListの内部では、カテゴリー（ラップトップ、電話、ラジオなど）でアイテムの配列を返す計算されたobservableを配置します。

function TaskListViewModel() { 
    // Data 
    var self = this; 
    self.folders = ['T-Card', 'Laptop', 'Phones', 'Radios']; 
    self.chosenFolderId = ko.observable(); 
    self.chosenFolderData = ko.observable(); 

    self.tasks = ko.observableArray([]); 
    self.TCards = ko.observableArray([]); 

    // Behaviours  
    self.goToFolder = function (item) { 
    self.chosenFolderData = ko.computed(function() { 
     return ko.utils.arrayFilter(self.tasks(), function (mainItem){ 
      if (item == mainItem.LoanItem()){return mainItem} 
     }); 
     }); 
    }; 

    self.goToFolder('Laptop'); 

    ... 

Answer 1

あなたは完全にself.chosenFolderDatagoToFolder関数が実行されるたびに上書きされます。代わりに、ビューモデルでをに1回だけ宣言し、変更されたオブザーバブルを使用するようにしたいとします。insde goToFolder。これらの線に沿って何か：

function TaskViewModel(title, folder) { 
 
    var self = this; 
 
    self.Title = ko.observable(title); 
 
    self.Folder = ko.observable(folder); 
 
} 
 

 
function TaskListViewModel(tasks) { 
 
    var self = this; 
 

 
    self.folders = ['T-Card', 'Laptop', 'Phones', 'Radios']; 
 
    self.chosenFolder = ko.observable(); 
 
    self.tasks = ko.observableArray(tasks); 
 

 
    self.chosenFolderData = ko.computed(function() { 
 
    return ko.utils.arrayFilter(self.tasks(), function(mainItem) { 
 
     if (self.chosenFolder() == mainItem.Folder()) { 
 
     return mainItem 
 
     } 
 
    }); 
 
    }); 
 

 
    self.goToFolder = function(item) { 
 
    self.chosenFolder(item); 
 
    }; 
 

 
    self.goToFolder('Laptop'); 
 
} 
 

 
ko.applyBindings(new TaskListViewModel([ 
 
    new TaskViewModel("Task One", "Laptop"), 
 
    new TaskViewModel("Task Two", "Phones"), 
 
    new TaskViewModel("Task Three", "Laptop"), 
 
    new TaskViewModel("Task Four", "Radios"), 
 
    new TaskViewModel("Task Five", "T-Card"), 
 
]));

.selected { background: coral; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<div> 
 
    <ul class="folders" data-bind="foreach: folders"> 
 
    <li data-bind="text: $data, 
 
        css: { selected: $data == $root.chosenFolder() }, 
 
        click: $root.goToFolder"></li> 
 
    </ul> 
 
</div> 
 

 
<div> 
 
    <table class="mails"> 
 
    <thead> 
 
     <tr> 
 
     <th>Title</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: chosenFolderData"> 
 
     <tr> 
 
     <td data-bind="text: Title"></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>