2012-10-26 29 views
5

Một câu hỏi Knockout khác mà tôi dường như không thể tìm thấy trợ giúp.Đăng ký thủ công Knockout Không kích hoạt khi thay đổi Dropdown

Tôi về cơ bản đang cố gắng triển khai menu thả xuống xếp tầng. Tôi yêu cầu giúp đỡ ngày hôm kia về cách phân tích cú pháp JSON phức tạp của tôi (mà đến từ một bộ điều khiển cakePHP. Sự giúp đỡ mà tôi nhận được ngày hôm trước thật tuyệt vời nhưng tôi đã gặp phải một vấn đề nhỏ khác. Tôi cập nhật viewModel sau khi tôi thực hiện cuộc gọi tới JSON để có danh sách các quốc gia. Khi tôi điền danh sách thả xuống, tôi muốn danh sách các hạt được hiển thị và cuối cùng là danh sách các thành phố nhưng tôi chưa có. Tôi chọn một quốc gia từ danh sách quan sát của tôi không cháy. Tôi nghi ngờ đó là bởi vì tôi đã tạo ra this.selectedCountry = ko.observable() và cập nhật bằng cách sử dụng ánh xạ nhưng tôi không biết tùy chọn hợp lệ cho điều này sẽ là gì.Tất nhiên tôi cũng có thể là cách nhãn hiệu:/

Tôi có mã sau đây

HTML:

<select id="countries" 
      data-bind=' 
       options: countries, 
       optionsValue : "Id", 
       optionsText: "country", 
       optionsCaption: "[Please select a country]", 
       value: selectedCountry'> 
</select> 

<select id="counties" 
       data-bind=' 
        options: selectedCountry() ? counties : null, 
        optionsValue : "Id", 
        optionsText: "County", 
        optionsCaption: "[Please select a county]", 
        value: selectedCounty, 
        visible: (counties() && counties().length > 0)'> 
     </select> 

Javascript

var countryData= {"countries":[{"Country":{"id":"1","country":"England"}},{"Country":{"id":"2","country":"Wales\/Cymru"}},{"Country":{"id":"3","country":"Scotland"}},{"Country":{"id":"4","country":"Republic of Ireland"}},{"Country":{"id":"5","country":"Northern Ireland"}}]}; 

var countyData= {"country":[{"County":{"id":"1","county":"Essex"}}]}; 

var countryMappingOptions = { 
    'countries': { 
     'update': function (options) { 
      return ko.mapping.fromJS(options.data.Country); 
     }, 
     'ignore': ["selectedCountry"] 
    } 
}; 

var countyMappingOptions = { 
    'counties': { 
     'update': function (options) { 
      return ko.mapping.fromJS(options.data.County); 
     } 
    } 
}; 
     var vm= function() { 
      this.selectedCountry = ko.observable(); 
      this.selectedCounty = ko.observable(); 
      this.countries = ko.mapping.fromJS([]); 
      this.counties = ko.mapping.fromJS([]); 
      // Whenever the continent changes, reset the country selection 
      this.selectedCountry.subscribe(function (countryId) { 
       alert(countryId); 
       this.selectedCounty(undefined); 
       this.counties(undefined); 
       if (countryId != null) { 
        ko.mapping.fromJS(countyData, countyMappingOptions,this.viewModel); 
       } 
      }); 
      this.selectedCounty.subscribe(function (countryId) { 
       alert(countryId);  
      } .bind(this)); 
     }; 

     var viewModel = new vm(); 
     ko.applyBindings(viewModel); 
     console.log(viewModel .countries()); 
     ko.mapping.fromJS(countryData, countryMappingOptions ,viewModel); 
     console.log(viewModel .selectedCountry()); 

Tôi cũng đã tạo ra một JSFiddle để giới thiệu các vấn đề ở đây http://jsfiddle.net/jbrr5/21/

Một lần nữa bất kỳ sự giúp đỡ với vấn đề này sẽ được đánh giá cao và một lần tôi nhận được hang của loại trực tiếp nó sẽ dễ dàng hơn nhiều.

Cảm ơn

Trả lời

6

Một số vấn đề:

  • bạn quên làm .bind(this) vào ngày đầu tiên đăng ký
  • this.viewModel thay vì chỉ this
  • bạn có optionsValue: "Id" thay vì optionsValue: "id"
  • bạn có optionsText: "County" thay vì optionsText: "county" mảng
  • countyData của bạn được gọi là country thay vì counties

Cập nhật fiddle: http://jsfiddle.net/antishok/jbrr5/23/

+0

Cảm ơn bạn rất nhiều, làm thế nào tôi bỏ lỡ các lỗi này tôi sẽ không bao giờ biết !!! Đánh giá cao phản hồi. – user1771329

Các vấn đề liên quan