0
У меня есть форма с несколькими полями в knockoutjs. Я создаю данные модели с помощью json. Я создал HTML-форму с несколькими файлами для поиска по этим данным через нокауты.Несколько полей обновление одной модели в knockoutjs
Проблема, которую я получаю, - это поиск/фильтрация на основе «ИЛИ». Когда вы выбираете другой фильтр, предыдущий ушел и поиск идет только по текущим полям. Как я могу справиться с этой проблемой.
Knockout JS
var outfitterJSON = <?php echo $this->JSON; ?>
var ViewModel = function(outfittersJSON) {
var self = this;
// Inputs
self.nameSearch = ko.observable();
self.registrationNumber = ko.observable();
self.unitNumber = ko.observable();
// Checkboxes & Radios
self.activeFilters = ko.observableArray([]);
self.regionFilters = ko.observableArray([]);
// Items
self.outfitters = ko.observableArray([]);
self.outfitters_temp = ko.observableArray([]);
//populate outfitters object and add visible flag for knockout to show/hide
outfittersJSON.forEach(function(value) {
value.visible = ko.observable(true);
self.outfitters().push(value);
});
// Search by Checkbox filters
self.activeFilters.subscribe(function(filters) {
// console.log(filters);
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if (filters.length) {
var shouldShowOutfitter = true;
//hide based on fitler array
filters.forEach(function(filter){
if (outfitter[filter] !== 'yes')
shouldShowOutfitter = false;
});
outfitter.visible(shouldShowOutfitter);
} else {
//show all if none are selected
outfitter.visible(true);
}
});
});
// Search by Business Name
self.nameSearch.subscribe(function(query) {
//console.log(query);
//console.log(self.outfitters())
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if(outfitter['businessname'].toLowerCase().indexOf(query.toLowerCase()) >= 0) {
outfitter.visible(true);
} else {
outfitter.visible(false);
}
});
});
// Search by Registration Number
self.registrationNumber.subscribe(function(regNum) {
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if(outfitter['reg'].indexOf(regNum) >= 0) {
outfitter.visible(true);
} else {
outfitter.visible(false);
}
});
});
// Search by Hunt Units
self.unitNumber.subscribe(function(unitNum) {
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if (outfitter['unit'].indexOf(unitNum.toString()) >= 0) {
outfitter.visible(true);
} else {
//show all if none are selected
outfitter.visible(false);
}
});
});
// Search by Region Numbers
self.regionFilters.subscribe(function(region) {
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if(outfitter['region'] === region) {
outfitter.visible(true);
} else if (region === 'any') {
outfitter.visible(true);
} else {
outfitter.visible(false);
}
});
});
};
var vm = new ViewModel(outfitterJSON);
ko.applyBindings(vm);
var $ = jQuery.noConflict();
// Reset all filters visually and fire click/change events
// so KO.js knows that items have been changed and can update accordingly
$('#outfitter-filter').on('reset', function (e) {
e.preventDefault();
$(this).find('input, select, textarea').each(function() {
if ($(this).is('input[type="radio"], input[type="checkbox"]')) {
if ($(this).is(':checked') !== $(this)[0].defaultChecked) {
$(this).val($(this)[0].defaultChecked);
$(this).trigger('click');
$(this).trigger('change');
}
} else {
if ($(this).val() !== $(this)[0].defaultValue) {
$(this).val($(this)[0].defaultValue);
$(this).change();
}
}
});
});
HTML Форма
<form action="" id="outfitter-filter" class="search_form">
<p><input type="reset" class="reset btn btn-sm btn-primary">
<strong>Filters:</strong> <span data-bind="text: nameSearch"></span> <span data-bind="text: activeFilters"></span>
</p>
<div class="row">
<div class="col-md-2">
<!-- Name Search -->
<label for="">Business Name</label>
<input type="search" data-bind="value: nameSearch, valueUpdate: 'keyup'" autocomplete="off" placeholder="Search by Name"/>
</div>
<div class="col-md-2">
<!-- Registration Number -->
<label for="">Registration #</label>
<input type="search" data-bind="value: registrationNumber, valueUpdate: 'keyup'" autocomplete="off" placeholder="Registration Number"/>
</div>
<div class="col-md-2">
<!-- Unit # -->
<label for="">Hunt Unit #</label>
<input type="search" data-bind="value: unitNumber, valueUpdate: 'keyup'" id="hunt-unit" maxlength="3" autocomplete="off" placeholder="Hunt Unit #"/>
</div>
<div class="col-md-4">
<!-- Regions -->
<label for="">Regions</label> <br>
<label class="radio-inline">
<input type="radio" name="NW" value="NW" data-bind="checked: regionFilters"> NW
</label>
<label class="radio-inline">
<input type="radio" name="SW" value="SW" data-bind="checked: regionFilters"> SW
</label>
<label class="radio-inline">
<input type="radio" name="NE" value="NE" data-bind="checked: regionFilters"> NE
</label>
<label class="radio-inline">
<input type="radio" name="SE" value="SE" data-bind="checked: regionFilters"> SE
</label>
<label class="radio-inline">
<input type="radio" name="any" value="any" data-bind="checked: regionFilters"> Any Region
</label>
</div>
</div>
<div class="row">
<div class="col-md-3">
<!-- Big Game Interests -->
<fieldset id="big-game">
<div class="row">
<div class="col-md-12">
<strong>Big Game of Interest:</strong>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="muledeer" type="checkbox" name="muledeer" data-bind="checked: activeFilters">Mule Deer</label></div>
<div class="checkbox"><label><input value="whitetaildeer" type="checkbox" name="whitetaildeer" data-bind="checked: activeFilters">Whitetail Deer</label></div>
<div class="checkbox"><label><input value="antelope" type="checkbox" name="antelope" data-bind="checked: activeFilters">Antelope</label></div>
<div class="checkbox"><label><input value="elk" type="checkbox" name="elk" data-bind="checked: activeFilters">Elk</label></div>
<div class="checkbox"><label><input value="mountainlion" type="checkbox" name="mountainlion" data-bind="checked: activeFilters">Mountain Lion</label></div>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="mountaingoat" type="checkbox" name="mountaingoat" data-bind="checked: activeFilters">Mountain Goat</label></div>
<div class="checkbox"><label><input value="bear" type="checkbox" name="bear" data-bind="checked: activeFilters">Bear</label></div>
<div class="checkbox"><label><input value="bighornsheep" type="checkbox" name="bighornsheep" data-bind="checked: activeFilters">Bighorn Sheep</label></div>
<div class="checkbox"><label><input value="moose" type="checkbox" name="moose" data-bind="checked: activeFilters">Moose</label></div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Small Game -->
<fieldset id="small-game">
<p><strong>Small Game of Interest:</strong></p>
<div class="checkbox"><label><input value="smallgame" type="checkbox" name="smallgame" data-bind="checked: activeFilters">General Small Game</label></div>
<div class="checkbox"><label><input value="turkey" type="checkbox" name="turkey" data-bind="checked: activeFilters">Turkey</label></div>
<div class="checkbox"><label><input value="uplandbirds" type="checkbox" name="uplandbirds" data-bind="checked: activeFilters">Upland Birds</label></div>
<div class="checkbox"><label><input value="waterfowl" type="checkbox" name="waterfowl" data-bind="checked: activeFilters">Waterfowl</label></div>
<div class="checkbox"><label><input value="varmints" type="checkbox" name="varmints" data-bind="checked: activeFilters">Varmints</label></div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Lodging -->
<fieldset id="lodging">
<div class="row">
<div class="col-md-12">
<strong>Lodging:</strong>
</div>
<div class="col-md-4">
<div class="checkbox"><label><input value="lodge" type="checkbox" name="lodge" data-bind="checked: activeFilters">Lodge</label></div>
<div class="checkbox"><label><input value="cabins" type="checkbox" name="cabins" data-bind="checked: activeFilters">Cabins</label></div>
<div class="checkbox"><label><input value="trailers" type="checkbox" name="trailers" data-bind="checked: activeFilters">Trailers</label></div>
<div class="checkbox"><label><input value="tents" type="checkbox" name="tents" data-bind="checked: activeFilters">Tents</label></div>
<div class="checkbox"><label><input value="motel" type="checkbox" name="motel" data-bind="checked: activeFilters">Motel</label></div>
</div>
<div class="col-md-8">
<div class="checkbox"><label><input value="wildernesscamps" type="checkbox" name="wildernesscamps" data-bind="checked: activeFilters">Wilderness Camps</label></div>
<div class="checkbox"><label><input value="handicapaccessible" type="checkbox" name="handicapaccessible" data-bind="checked: activeFilters">Handicap Accessible</label></div>
<div class="checkbox"><label><input value="camping" type="checkbox" name="camping" data-bind="checked: activeFilters">Camping</label></div>
<div class="checkbox"><label><input value="dropcamps" type="checkbox" name="dropcamps" data-bind="checked: activeFilters">Drop Camps</label></div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Summer Recreation -->
<fieldset id="summer">
<div class="row">
<div class="col-md-12">
<strong>Summer Recreation:</strong>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="flyfishing" type="checkbox" name="flyfishing" data-bind="checked: activeFilters">Fly Fishing</label></div>
<div class="checkbox"><label><input value="spincasting" type="checkbox" name="spincasting" data-bind="checked: activeFilters">Spin Casting</label></div>
<div class="checkbox"><label><input value="lakefishing" type="checkbox" name="lakefishing" data-bind="checked: activeFilters">Lake Fishing</label></div>
<div class="checkbox"><label><input value="streamfishing" type="checkbox" name="streamfishing" data-bind="checked: activeFilters">Stream Fishing</label></div>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="floattrips" type="checkbox" name="floattrips" data-bind="checked: activeFilters">Float Trips</label></div>
<div class="checkbox"><label><input value="rafting" type="checkbox" name="rafting" data-bind="checked: activeFilters">Rafting</label></div>
<div class="checkbox"><label><input value="other" type="checkbox" name="other" data-bind="checked: activeFilters">Other</label></div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-md-3">
<!-- Special Services -->
<fieldset id="services">
<div class="row">
<div class="col-md-12">
<strong>Special Services:</strong>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="packtrips" type="checkbox" name="packtrips" data-bind="checked: activeFilters">Pack Trips</label></div>
<div class="checkbox"><label><input value="horserides" type="checkbox" name="horserides" data-bind="checked: activeFilters">Horse Rides</label></div>
<div class="checkbox"><label><input value="cattledrives" type="checkbox" name="cattledrives" data-bind="checked: activeFilters">Cattle Drives</label></div>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="horserental" type="checkbox" name="horserental" data-bind="checked: activeFilters">Horse Rental</label></div>
<div class="checkbox"><label><input value="guideschools" type="checkbox" name="guideschools" data-bind="checked: activeFilters">Guide Schools</label></div>
<div class="checkbox"><label><input value="overnighttrips" type="checkbox" name="overnighttrips" data-bind="checked: activeFilters">Overnight Trips</label></div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Winter -->
<fieldset id="winter">
<p><strong>Winter:</strong></p>
<div class="checkbox"><label><input value="sleighrides" type="checkbox" name="sleighrides" data-bind="checked: activeFilters">Sleigh Rides</label></div>
<div class="checkbox"><label><input value="snowmobiletours" type="checkbox" name="snowmobiletours" data-bind="checked: activeFilters">SnowMobile Tours/Rental</label></div>
<div class="checkbox"><label><input value="skiing" type="checkbox" name="skiing" data-bind="checked: activeFilters">Skiing</label></div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Operating Area -->
<fieldset id="operating-area">
<p><strong>Operating Area</strong></p>
<div class="checkbox"><label><input value="blm" type="checkbox" name="blm" data-bind="checked: activeFilters">BLM</label></div>
<div class="checkbox"><label><input value="nationalforest" type="checkbox" name="nationalforest" data-bind="checked: activeFilters">National Forest</label></div>
<div class="checkbox"><label><input value="privateland" type="checkbox" name="privateland" data-bind="checked: activeFilters">Private Land</label></div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Other -->
<fieldset id="other">
<p><strong>Other</strong></p>
<div class="checkbox"><label><input value="ranchingforwildlife" type="checkbox" name="ranchingforwildlife" data-bind="checked: activeFilters">Ranching for Wildlife</label></div>
<div class="checkbox"><label><input value="workingcattleranch" type="checkbox" name="workingcattleranch" data-bind="checked: activeFilters">Working Cattle Ranch</label></div>
</fieldset>
</div>
</div>
вы можете уточнить свой вопрос и предоставить JSFiddle, который моделирует вашу проблему? Я не понимаю ваш вопрос –