我使用Knockout JS。我有两个< select>' s。一个有区域,另一个有选定区域内的城镇。当用户选择区域时,城镇选择应该与该区域的城镇一起更新。但是在我的网站上却没有。这是为什么?这是我的代码:
interface iGetAreas {
_areasList:Array< string&gt ;;
_areas:KnockoutObservableArray< string&gt ;;
_selectedArea:KnockoutObservable< string&gt ;;
getAreas(geonameId:string);
}
class AreaGetter实现了iGetAreas {
_areasList = [];
_areas = ko.observableArray([]);
_selectedArea = ko.observable('');
getAreas =(geonameId)=> {
this._areasList = [];
$就({
url:`http://api.geonames.org/children?ignameId = $ {geonameId}& username = elion`
})。then((allAreasXML)=> {
var allAreasJSON = xml2json(allAreasXML);
var allAreas = JSON.parse(allAreasJSON);
if(allAreas.geonames.length){
for(var index = 1; index< allAreas.geonames.length - 1; index ++){
this._areasList.push(allAreas.geonames [指数] .geoname);
}
} else {
if(allAreas.geonames){
this._areasList.push(allAreas.geonames.geoname);
}
}
this._areas(this._areasList);
$(' .tvr-select')。each(function(){
$(本).multiselect({
buttonWidth:' 100%',
buttonContainer:'< div style =" height:64px;" />&#39 ;,
buttonClass:' none'
});
})
});
}
}
class SearchFilterViewModel {
_regionGetter:AreaGetter;
_townGetter:AreaGetter;
_categories:KnockoutObservableArray< Category&gt ;;
_categoryID:数;
constructor(){
this._categoryID = 1;
this._categories = ko.observableArray([
新类别(" Vegan Meat",1),
新类别(" Vegan Dairy",2),
新类别("糖果",3),
新类别(" Baking",4),
新类别("餐厅",5),
新类别(" Fashion",6)
]);
this._regionGetter = new AreaGetter();
this._townGetter = new AreaGetter();
this._regionGetter.getAreas(" 2186224&#34);
this._regionGetter._selectedArea.subscribe(this._townGetter.getAreas.bind(this._townGetter));
}
logMyStuff = function(){
的console.log(this._townGetter._areasList);
的console.log(this._regionGetter._areasList);
的console.log("东西&#34);
}
}
$(document).ready(function(){
var _searchFilterViewModel:SearchFilterViewModel = new SearchFilterViewModel();
var _searchFilterForm = $("#find-vegan-products-page")。find(" form")[0];
ko.applyBindings(_searchFilterViewModel,_searchFilterForm);
});
HTML:
< div id =" find-vegan-products-page" class ="全尺寸容器 - 流体"风格="高度:900px;填充:70px 40px 40px 40px;">
<! - TODO:使黑白视频部分缩短一点 - >
< h1 style =" margin:0px 0px 20px 0px;颜色:暗淡;">过滤您的搜索< / h1>
< button style =" width:400px; height:400px;" data-bind ="点击:logMyStuff">< / button>
< form role =" form">
< div class =" row">
&LT ;?
echo RegionSelect :: display();
echo TownSelect :: display();
// echo CategorySelect :: display();
?>
< / DIV>
< div class =" row">
< div class =" col-sm-12">
< div id =" go-button"
class =" with-border clickable"
HREF =#&34;#查找全素产品页" >
< h5 class ="文本中心中文"> GO< / h5>
< / DIV>
< / DIV>
< / DIV>
< /形式>
< / DIV>
选择是由php模板完成的,但这里是输出:
< select class =" tvr-select" data-bind ="选项:_regionGetter._areas,
optionsText:' name',
optionsValue:' geonameId',
value:_regionGetter._selectedArea,
optionsCaption:' REGION'
" style =" display:none;">< option value =""> REGION< / option>< option value =" 2193734"> ;奥克兰< /选项><选项值=" 2182560">丰盛湾< /选项><选项值=" 2192628">坎特伯雷< /选项><选项值=" 4033013">查塔姆群岛< /选项><选项值=" 2190767">吉斯伯恩< /选项><选项值=" 2190146&# 34;> Hawke's Bay< / option>< option value =" 2179671"> Manawatu-Wanganui< / option>< option value =" 2187304"> ; Marlborough< / option>< option value =" 6612108"> Nelson< / option>< option value =" 2185978"> Northland< / option><期权价值=" 6612109"> Otago< / option>< option value =" 2182501"> Southland< / option>< option value =" 2181872"> ; Taranaki< / option>< option value =" 2181818"> Tasman< / option>< option value =" 2180293&#3 4;> Waikato< / option>< option value =" 2179538"> Wellington< / option>
< /选择>
< select class =" tvr-select" data-bind ="选项:_townGetter._areas,
optionsText:' name',
optionsValue:' geonameId',
value:_townGetter._selectedArea,
optionsCaption:' TOWN'
" style =" display:none;">< option value =""> TOWN< / option>< option value =" 2193772"> ; Ashburton区< / option>< option value =" 7910036"> Christchurch City< / option>< option value =" 7910044"> Hurunui District< / option>< ;选项值=" 7910046">凯库拉区< /选项><选项值=" 7910050"> Mackenzie区< /选项><选项值=" 7910060"> Selwyn District< / option>< option value =" 2181134"> Timaru District< / option>< option value =" 7910069"> Waimakariri District< ; /选项>
< /选择>
注意我试图运行一个名为logMyStuff的函数,但是当我点击按钮时它永远不会运行。我想知道townGetter._areas是否有很多区域