Обновление dxTextboxes на основе выбора dxSelectBox - Devextreme

Question

Я искал, но не могу найти подходящий способ, применимый к моей ситуации.

У меня есть dxSelectBox в моем приложении Devextreme. Данные внутри этого dxSelectBox поступают из пользовательского источника данных. У меня есть несколько dxTextBoxes на моей странице. Основываясь на выборе esxlection dxSelectBox, я хотел бы заполнить dxTextBoxes данными, которые применяются только к выбранному элементу.

Это мой дизайн код dxSelectBox

   <div class="dx-field"> 
       <div class="dx-field-label">Site: </div> 
       <div class="dx-field-value" id="cboSite" data-bind="dxSelectBox: { dataSource: siteStore, displayExpr: 'SiteName',value:'SiteID', onItemClick: GetBoxValue}"></div> 
      </div> 

Затем я загрузить данные в моем файле JS, как это:

  var url = 'URL/GetSites'; 

    // CustomerSite = $("#mySelectBoxID").dxSelectBox('instance').option('value'); 

    var siteStore = new DevExpress.data.CustomStore({ 
     load: function (loadOptions) { 

      return $.ajax({ 
       type: 'GET', 
       url: url, 
       data: {}, 
       cache: true, 
       dataType: "jsonp", 
       success: function (result) { 
        console.log(JSON.stringify(result)); 

       }, 
       error: function (xhr, status, error) { 
        console.log(JSON.stringify(xhr)); 
        console.log(JSON.stringify(status)); 
        console.log(JSON.stringify(error)); 
       } 

      }); 

     }, 
     totalCount: function (loadOptions) { 
      return 0; 
     } 
    }); 

     function GetBoxValue() { 

     alert($("#cboSites").dxSelectBox('instance').option('value')), 

    }; 

Что отправляется из моей службы Имя, код , ID, SiteID, SiteName.

Я бы хотел, чтобы имя сайта внутри cboSites выпадало, приложение должно заполнить поля значениями Name, Code и ID.

Может ли кто-нибудь направить меня?

Answer 1

В вашем случае вы можете использовать Knockout Computed Observables, чтобы проверить, когда выбран выбранный элемент выбора. Таким образом, код может быть, как показано ниже:

var selectedItem = ko.observable(null), 
    name = ko.observable(""), 
    id = ko.observable(""), 
    code = ko.observable(""); 

ko.computed(function(){ 
    var value = selectedItem(); 
    if(value) { 
     name(value.name); 
     id(value.id); 
     code(value.code); 
    } 
}); 

Здесь есть selectedItem значения, которое содержит выбранное значение переключателя. Кроме того, существуют значения name, id и code, которые содержат определенное поле выбранного элемента.

При изменении selectedItem функция ko.computed запускает и обновляет связанные значения.

Я создал небольшой образец здесь - http://jsfiddle.net/e6wra6p8/

Вы можете найти более подробную информацию о selectedItem выбора dxSelectBox виджета в documentation, а также.