knockout js - subscribe没有更新<select>选项

时间:2016-03-10 09:11:22

标签: javascript jquery knockout.js

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

0 个答案:

没有答案