使用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.chosenFolderData函数时，都会完全覆盖goToFolder。相反，您希望在视图模型上声明仅计算一次，并使其使用已更改为ins goToFolder的observable。这些方面的东西：

＆＃13;

＆＃13;

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"),
]));

＆＃13;

.selected { background: coral; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;