如何在编辑时管理多个依赖的液滴？

Question

我有4个模型，其值取决于下一个模型。4种模式：(1)设备类型(2)设备品牌(3)设备型号(4)设备

这里(2)取决于(1)的值，(3)取决于(2)的值，(4)取决于(3)的值。

当我从液滴(1)中选择值时，它将使用make调用更新(2)的液滴值，当从液滴(2)中选择值时，它将使用ajax调用更新(3)的值等等。

这条链子可能是多重的。

​

​

对于新的形式，它将罚款。没问题。

但是当我们进行更新时，我们如何才能更好地管理这些东西呢？

我试过

在页面加载集上，我有4个模型，其值取决于每个下一个模型。4种模式：(1)设备类型(2)设备品牌(3)设备型号(4)设备

这里(2)取决于(1)的值，(3)取决于(2)的值，(4)取决于(3)的值。

当我从液滴(1)中选择值时，它将使用make调用更新(2)的液滴值，当从液滴(2)中选择值时，它将使用ajax调用更新(3)的值等等。

这条链子可能是多重的。

​

​

对于新的形式，它将罚款。没问题。

但是当我们进行更新时，我们如何才能更好地管理这些东西呢？

我试过

按页加载

1)从DB中设置设备类型值。

// On page load
$(".equipment_type_cmb_box").each(function(){
  $(this).trigger('change');
})

$(function(){

  $(document).on('change', ".equipment_type_cmb_box", function(){
    $.ajax({
        url: '/get_equipment_brand_collection',
        dataType: 'json',
        data: {equipment_type_id: $(this).val()},
    })
    .done(function(data) {
     // set equipment brand values in equipment brand droplist
     $(".equipment_brand_cmb_box").html('').select2({
         data: data.equipment_brands.map(function(obj){
           return {id: obj.id, text: obj.name} 
         })
     })
// change the value in droplist and fire change event to get next associated droplist data
  $(".equipment_brand_cmb_box").val(db_saved_value).trigger('change')
    })
    .fail(function(errorObject) {
        console.log("Error : ", errorObject.statusText);
     })
  })

  $(document).on('change', ".equipment_brand_cmb_box", function(){
      $.ajax({
        url: '/get_equipment_model_collection',
        dataType: 'json',
        data: {equipment_brand_id: $(this).val()},
      })
      .done(function(data) {
        // set equipment model values in equipment model droplist
        $(".equipment_model_cmb_box").html('').select2({
          data: data.equipment_models.map(function(obj){
                  return {id: obj.id, text: obj.name} 
                })
        })
       // change the value in droplist and fire change event to get next associated droplist data
  $(".equipment_model_cmb_box").val(db_saved_value).trigger('change')
      })
      .fail(function(errorObject) {
        console.log("Error : ", errorObject.statusText);
      })
    })

    $(document).on('change', ".equipment_model_cmb_box", function(){
      $.ajax({
        url: '/get_equipment_collection',
        dataType: 'json',
        data: {equipment_model_id: $(this).val()},
      })
      .done(function(data) {
        // set equipment values in equipment droplist
        $(".equipment_cmb_box").html('').select2({
          data: data.equipment.map(function(obj){
                  return {id: obj.id, text: obj.name} 
                })
        })
// change the value in droplist and fire change event to get next associated droplist data
       $(".equipment_cmb_box").val(db_saved_value).trigger('change')
      })
      .fail(function(errorObject) {
        console.log("Error : ", errorObject.statusText);
      })
    })
})

一次消防3次ajax呼叫，获取设备品牌、设备型号、设备数据。因此，如果我有5链，那么它将触发15个ajax调用，这不是一个更好的方法。

有人能对此有更好的建议吗？如果任何一个人对这种情况都有适当的解决方案，那就太好了。

Answer 1

我不确定这是否对您有帮助，但是您可以尝试缓存提供选项的函数。这将减少api调用。

JSFiddle

function getOptions(endpoint, data) {
  var hash = endpoint + JSON.stringify(data);
  if (typeof getOptions.cache[hash] !== "undefined") {
    console.log('Got data from cache');
    return Promise.resolve(getOptions.cache[hash]);
  }

  return $.ajax({
    url: endpoint,
    dataType: 'json',
    data: data
  }).then(function(resp) {
    console.log('Got data from api');
    getOptions.cache[hash] = resp;
    return resp;
  })
}