javascript - 当使用另一个选择时，Knockout.js 将选择的值重置回其默认值

Question

我正在处理一个以 3 种方式之一填充的数据表。1. 实时搜索2. 选择框 1(搜索类别)3. 选择框 2 (searchTCA)

除了一个我无法解决的问题之外，一切都正常。

当用户在任一选择框中选择一个选项时，我希望将另一个选项重置为默认值。

我仍在学习 knockout ，因此我们将不胜感激。

谢谢-

这是我的 HTML:

 <div class="row">
 <div class="col-sm-12">
     <form id="requestForm" class="request-form form-horizontal">
         <div class="form-group">
             <label for="searchInput" class="col-sm-3 control-label">Search</label>
             <div class="col-sm-9">
                 <input id="searchInput" type="text" name="searchInput" class="form-control" placeholder="What are you looking for?" onfocus="this.value=''" data-bind="textInput: query, valueUpdate: 'keyup'" autocomplete="off" />
             </div>
        </div>
        <div class="form-group">
            <label for="searchCategory" class="col-sm-3 control-label">View by Category</label>
            <div class="col-sm-9">
                <select id="searchCategory" data-bind="options: availableCategories, value: selectedCategory, optionsCaption: 'Search by Category'"></select>
            </div>
        </div>
        <div class="form-group">
            <label for="searchTCA" class="col-sm-3 control-label">View by TCA Method</label>
            <div class="col-sm-9">
                <select id="searchTCA" data-bind="options: availableTcaMethods, value: selectedTcaMethod, optionsCaption: 'Search by TCA Method'"></select>
            </div>
       </div>
   </form>
 </div>

这是 JS:

 define(function (require) {
"use strict";

var $ = require("jquery"),
    ko = require("knockout"),
    komapping = require("komapping"),
    bootstrap = require("bootstrap"),
    $embedElement = $("#Architectural-Guidebook");


if ($embedElement.length) {

    function ArchitecturalGuidebookViewModel(dduration) {
        var self = this;

        self.specifications = ko.observableArray([]);
        debugger;

        self.availableCategories = ko.observable();
        self.selectedCategory = ko.observable();

        self.availableTcaMethods = ko.observable();
        self.selectedTcaMethod = ko.observable();

        self.availableCategories = ko.dependentObservable(function () {
            var types = ko.utils.arrayMap(self.specifications(), function (item) { return item.Category; });
            return ko.utils.arrayGetDistinctValues(types).sort();
        });

        self.availableTcaMethods = ko.dependentObservable(function () {
            var types = ko.utils.arrayMap(self.specifications(), function (item) { return item.TcaMethod; });
            return ko.utils.arrayGetDistinctValues(types).sort();
        });

        self.specifications($.parseJSON(window.jsonModel));

        self.query = ko.observable('What are you looking for?');

        // Search
        self.pageNumber = ko.observable(0);
        self.filterSpecifications = ko.computed(function () {
            self.pageNumber(0);
            return ko.utils.arrayFilter(self.specifications(), function (i) {
                var filterLogic =
                    (i.TcaMethod.toLowerCase().indexOf(self.query().toLowerCase()) >= 0) ||
                    (i.Title.toLowerCase().indexOf(self.query().toLowerCase()) >= 0) ||
                    (i.Category.toLowerCase().indexOf(self.query().toLowerCase()) >= 0) ||
                    (i.Application.toLowerCase().indexOf(self.query().toLowerCase()) >= 0) ||
                    (i.Category === self.selectedCategory() && self.query('What are you looking for?')) ||
                    (i.TcaMethod === self.selectedTcaMethod() && self.query('What are you looking for?'));
                return filterLogic;
            });
        });

        // Pagination
        self.nbPerPage = 8;
        self.totalPages = ko.computed(function () {
            var div = Math.floor(self.filterSpecifications().length / self.nbPerPage);
            div += self.filterSpecifications().length % self.nbPerPage > 0 ? 1 : 0;
            return div - 1;
        });

        self.paginated = ko.computed(function () {
            var first = self.pageNumber() * self.nbPerPage;
            return self.filterSpecifications().slice(first, first + 
                      self.nbPerPage);
        });

        self.hasPrevious = ko.computed(function () {
            return self.pageNumber() !== 0;
        });

        self.hasNext = ko.computed(function () {
            return self.pageNumber() !== self.totalPages();
        });

        self.next = function () {
            if (self.pageNumber() < self.totalPages()) {
                self.pageNumber(self.pageNumber() + 1);
            }
        };

        self.previous = function () {
            if (self.pageNumber() !== 0) {
                self.pageNumber(self.pageNumber() - 1);
            }
        };

    };

    ko.applyBindings(new ArchitecturalGuidebookViewModel());

  }

});

Answer 1

您可以subscribe到 selectedCategory 和 selectedTcaMethod 可观察对象，并在其中一个发生更改时将另一个下拉列表的值设置为 undefined。

此外，您还将清除焦点上输入的值。这只会清除输入，而不会清除 query observable 的值。因此，即使清除输入，filterSpecifications 计算属性也不会触发 onfocus。相反，您可以使用 event绑定(bind)以调用函数onfocus。

这是一个最小的工作片段:

var viewModel = function() {
  var self = this;

  self.selectedCategory = ko.observable();
  self.selectedTcaMethod = ko.observable();

  self.availableCategories = ko.observableArray(["Category 1"]);
  self.availableTcaMethods = ko.observableArray(["TCA 1"]);

  self.selectedCategory.subscribe(function() {
    // if condition added to avoid cyclic subscribe triggers
    if (self.selectedCategory())
      self.selectedTcaMethod(undefined);
  })
  self.selectedTcaMethod.subscribe(function() {
    // if condition added to avoid cyclic subscribe triggers
    if (self.selectedTcaMethod())
      self.selectedCategory(undefined);
  });

  self.query = ko.observable('What are you looking for?');

  self.onFocus = function() {
    // clear the input on focus
    self.query('');
  };

  self.filterSpecifications = ko.computed(() => {
    self.query() + self.selectedCategory() + self.selectedTcaMethod();
    console.log("computed");
  });
}

ko.applyBindings(new viewModel());

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

<input data-bind="textInput: query, valueUpdate: 'keyup', event: { focus: onFocus }" type="text" placeholder="What are you looking for?" />

<select id="searchCategory" data-bind="options: availableCategories, value: selectedCategory, optionsCaption: 'Search by Category'"></select>

<select id="searchTCA" data-bind="options: availableTcaMethods, value: selectedTcaMethod, optionsCaption: 'Search by TCA Method'"></select>