javascript - نوكوتجس-فقدت اتجاهين ملزم لتحديد القيمة عند استخدام فوريش بدلا من الخيارات



knockout.js data-binding (1)

لدي اثنين من الضوابط اختيار.

واحد يعتمد على الآخر. لمثال بسيط، دعونا نفترض يعرض أول قائمة من المدن، في حين أن الآخر يعرض قائمة من الشوارع في كل مدينة.

عندما يتم تحميل الصفحة في البداية، فإن عنصر التحكم المحدد الذي يعرض الشوارع يعرض جميع الشوارع المتاحة. ومع ذلك، مرة واحدة يختار المستخدم مدينة في أول تحديد، يتم تصفية الثاني حدد لعرض الشوارع التي تنتمي إلى المدينة المختارة فقط.

هذا يعمل موافق عند استخدام الخيارات ملزمة، ومع ذلك، أنا بحاجة إلى القدرة على إنشاء مجموعات أوبتيونس والخيارات ملزمة لا يدعم ذلك، لذلك لا بد لي من استخدام فوريش ملزمة.

والنتيجة هي أنه كلما تم اختيار مدينة، هناك عواقب غير مقصودة:

  1. يظهر الخيار الثاني (قائمة الشوارع التي تمت تصفيتها) أن يكون أول شارع من المدينة المختارة المختارة، على الرغم من أنني أستخدم فالويمالونسيت: ترو. ولا ينعكس ذلك في نموذج العرض
  2. عندما تختار في الواقع شارع في الثانية اختيار ثم اختيار مدينة مختلفة في أول تحديد، والثانية حدد التحديثات بشكل صحيح لتعكس التغييرات في القائمة، ولكن نموذج عرض لا، وبالتالي لا تزال تحتفظ القيمة المحددة سابقا (على الرغم من انها ليست في القائمة بعد الآن). حتى إذا قمت بإزالة فالوالونسيت: صحيح من الثانية حدد، لا تزال المشكلة لا تزال قائمة.

هل هناك أي حل لهذه المشكلة؟ أنا حقا أن استخدام فوريش ملزمة بدلا من الخيارات ملزمة.

جسفيدل: https://jsfiddle.net/jfxovLna/13/

var ViewModel = function() {

var self = this;

var regionAndCityArray = [{
 regionName: "Europe",
 cities: [{
   cityName: "London",
   additionalUnimportantInformation: 100
 }, {
   cityName: "Paris",
   additionalUnimportantInformation: 200
 }]
}, {
 regionName: "North America",
 cities: [{
   cityName: "New York",
   additionalUnimportantInformation: 45
 }]
}];

var cityAndStreetArray = [{
 cityName: "London",
 streets: [{
   streetName: "Parker",
   streetLength: 5
 }, {
   streetName: "Macklin",
   streetLength: 10
 }, ]
}, {
  cityName: "New York",
 streets: [{
   streetName: "5th Avenue",
   streetLength: 3
 }, {
   streetName: "Park Ave",
   streetLength: 12
 }]
}, {
  cityName: "Paris",
 streets: [{
   streetName: "Rue de Turbigo",
   streetLength: 11
 }, {
   streetName: "Rue aux Ours",
   streetLength: 12
 }]
}];

var getAvailableStreets = function() {

 var availableStreets = cityAndStreetArray;

 var selectedCity = self.selectedCity();

 var selectedRegion = _.find(regionAndCityArray,
   function(region) {
     return _.find(region.cities,
       function(city) {
         return city.cityName === selectedCity;
       });
   });

 if (selectedRegion == undefined) {
   return availableStreets;
 }

 var filteredStreets = _.filter(cityAndStreetArray,
   function(city) {
     return city.cityName === selectedCity;
   });

 return filteredStreets;
}

self.availableCities = ko.observableArray(regionAndCityArray);
self.selectedCity = ko.observable();
self.availbleStreets = ko.computed(getAvailableStreets);
self.selectedStreet = ko.observable();

};
var viewModel = new ViewModel();
ko.applyBindings(viewModel);

أولا، قم بإضافة خيار فارغ إلى إدخال الإدخال.

<option value="">Select Street</option>

الآن الاشتراك في الخاصية سيلسيتيسي لنموذج العرض الخاص بك. كلما تغيرت، برمجيا تعيين ستريتدستريت إلى ''.

viewModel.selectedCity.subscribe(function() { 
  viewModel.selectedStreet(''); 
}, viewModel); 

بهذه الطريقة يمكنك حل كل القضايا الخاصة بك.

أدلى التغييرات في كمان الخاص وأنه يعمل. يحاول تحديثه.

هنا هو كمان - https://jsfiddle.net/Shabi_669/w1vcjbjo/





viewmodel