Обзор проблемы
У меня возникают трудности с определением того, что вызвало изменение вычисляемой наблюдаемой величины.
У меня есть выпадающий список выбора, который используется для фильтрации наблюдаемого массива, отображаемого в таблице. , Вот поле выбора:
Вот как я определяю выбор:
// Javascript
let filters = ["All", "Pending", "Accepted", "Rejected", "Expired"];
// HTML
<select data-bind="options: filters, value: filter">
</select>
Когда пользователь выбирает значение, эта вычисленная наблюдаемая используется для фильтрации основного массива данных:
self.filteredItems = ko.computed(function() {
var filter = self.filter();
if (!filter || filter == "All") {
return self.quotes();
} else {
return ko.utils.arrayFilter(self.quotes(), function(i) {
console.log(i);
return i.status() == filter;
});
}
});
, как вы можете видеть, свойство status в массиве кавычек сравнивается со значением фильтра в выпадающем списке. Все отлично работает Но теперь я добавляю поиск по ключевым словам и в массив (как показано ниже):
Я связал текстовое поле ключевого слова с наблюдаемой:
self.keyword = ko.observable();
Изменение кода для обработки поиска по ключевым словам
Я считаю, что мог бы легко изменить вычисляемый наблюдаемый код для обработки поиска по ключевым словам, изменив это значение:
return i.status() == filter;
на что-то вроде этого (по сравнению с другими свойствами в массиве)
return i.fullName() == keyword || i.amount() == keyword || ..etc
НО
Я не знаю, как определить, фильтровать ли массив по фильтру раскрывающийся список или отфильтруйте его по ключевому слову. Каким-то образом мне нужно знать, что вызвало изменение вычисляемой наблюдаемой величины, не так ли?
Есть идеи?
Вот модель полного представления:
// Quotes View Model
// +---------------------------------------------------------------------------+
// | Quote View Model |
// | |
// | quotes-view-model.js |
// +---------------------------------------------------------------------------+
// | Shows a list of all Quotes |
// +---------------------------------------------------------------------------+/
let QuoteModel = function(id, quote_number, created_date, expiration_date, amount, client, status){
this.id = ko.observable();
this.quote_number = ko.observable(quote_number);
this.created_date = ko.observable(created_date);
this.expiration_date = ko.observable(expiration_date);
this.amount = ko.observable(amount);
this.client = ko.observable(client);
this.status = ko.observable(status);
}
let ClientModel = function(id, fullName){
this.id = ko.observable(id);
this.fullName = ko.observable(fullName);
}
// Define Status Dropdown filters
let filters = ["All", "Pending", "Accepted", "Rejected", "Expired"];
function QuoteViewModel() {
var self = this; // Scope Trick
/* QUOTE Observables */
self.quotes = ko.observableArray();
self.clients = ko.observableArray();
self.keyword = ko.observable();
self.searchType = ko.observable();
self.filters = ko.observableArray(filters);
self.filter = ko.observable('');
self.filteredItems = ko.computed(function() {
var filter = self.filter();
if (!filter || filter == "All") {
return self.quotes();
} else {
return ko.utils.arrayFilter(self.quotes(), function(i) {
console.log(i);
return i.status() == filter;
});
}
});
/* GET PAGE DATA */
/* CLIENTS */
$.getJSON(apiCustomersAll,
function(data) {
var fullName;
$.each(data,
function(key, val) {
fullName = val.first_name + " " + val.last_name;
self.clients.push(new ClientModel(val.id, fullName));
});
});
$.getJSON(apiQuotesAll,
function(data) {
var fullName;
$.each(data,
function(key, val) {
fullName = self.getClientById(val.client_id);
console.log(`Full name is ${fullName}`);
self.quotes.push(new QuoteModel(val.id,
val.quote_number,
formatDate(val.created_date),
formatDate(val.expiration_date),
val.amount,
fullName,
val.status
));
});
});
// Search Client Array, Return Full Name
self.getClientById = function(id) {
const client = self.clients().find(function(val){
return val.id() == id;
});
if(client) {
return client.fullName();
}
return undefined;
}
self.search = function(){
// to do
}
}
ko.applyBindings(new QuoteViewModel());