Question

我正在开发使用Edmunds外部API的rails应用。 http://developer.edmunds.com/

在主页上，我正在尝试创建动态选择下拉框。这是一系列事件。

1）在主页加载时，将使用所有新车 make （丰田，本田等）填充选择下拉列表

2）当用户选择特定的汽车品牌时，会出现第二个选择下拉列表，其中包含特定于品牌的所有汽车型号的列表。（凯美瑞，雅阁等）

3）对于汽车的特定装饰和风格，会出现相同的顺序。最终结果是一辆特定的汽车（丰田凯美瑞LE 2DR）。

4）用户单击提交按钮，汽车的属性将保存到具有相同对应属性的Car模型。

我正在寻找最佳方法的高级概述。

目前，我有动态选择框行为正常工作。问题是，每次选择新的make时，它都是Jquery并进行AJAX调用。

$.ajax({
  type: "GET",
  url: "http://api.edmunds.com/api/vehicle/v2/makes?fmt=json&state=new&api_key=" + edmunds_api_key,
  dataType: "jsonp",
  success: function(data) {
    var makeArray = data.makes;
    console.log(data.makes);
    $.each(makeArray, function(index, value) {
      $('#make_id').append('<option value="' + value.name + '">' + value.name + '</option>');
    });
  }
});

$(document).on('change', '#make_id', function() {
  retrieve_model(this.value);
});

function retrieve_model(make) {
  $.get('https://api.edmunds.com/api/vehicle/v2/' + make + '/models?  fmt=json&api_key=' + edmunds_api_key, function(data) {
    var modelArray = data.models;
    console.log(data.models);
    $('#model_id').empty();
    $.each(modelArray, function(index, value) {
      $('#model_id').append('<option>' + value.name + '</option>');
    });
  });
}

我知道有更好的方法可以做到这一点。我只是不确定如何实现它或实现此类应用程序时的最佳实践。

寻找有关人们如何处理项目的一般指导。

在主页加载时，我可以拨打1个电话，然后在整个过程中使用该数据吗？而不是进行多次不必要的调用。

我确实找到了很多关于这个主题的帖子。例如.. Using ActiveRecord interface for Models backed by external API in Ruby on Rails

大多数都是我的头脑或Rails的旧版本。有什么建议吗？

Answer 1

我会检查你的API许可并计算预期的数量 - 他们可能会把你限制在x连接/秒/小时。如果您能够满足这些限制，我认为没有任何理由不使用API。您可以使用一些常识性缓存来防止不必要的调用（未经测试）：

$(document).on('change', '#make_id', function() {
  writeModels(retrieve_model(this.value));
});

var modelCache = {};

function retrieve_model(make) {
  if (modelCache[make]) {
    return modelCache[make]; //return cached value
  }
  $.get('https://api.edmunds.com/api/vehicle/v2/' + make + '/models?  fmt=json&api_key=' + edmunds_api_key, { 
    context: this,  //needed to ensure "make" is correct in the complete callback
    complete: function(data) {
      var modelArray = data.models;
      console.log(data.models);
      modelCache[make] = data.models; //populate cache
    }
  });
}

function writeModels(modelArray) {
  $('#model_id').empty();
  $.each(modelArray, function(index, value) {
    $('#model_id').append('<option>' + value.name + '</option>');
  });
}

一般方向导轨外部API

1 个答案: