javascript - IE选择不附加选项

Question

我创建了一个货币转换器对象，它在 IE 中运行良好。没有任何选项附加到选择元素。几个小时以来，我一直在努力寻找解决方案，但无法弄清楚发生了什么。我是 javascript 的新手，所以我可能做错了一些事情，只是不确定是什么。似乎没有从 fetch 中调用 render 方法。谢谢

var CurrencyConverter = {

  // Initialize Currency Converter
  // total: jQuery wrapped object that contains the price to convert
  // select: jQuery wrapped select element to render the options tag in
  init: function  (total, select) {

    var that = this;

    this.total = total;
    this.base_price = accounting.unformat(this.total.text());
    this.select = select;

    this.fetch();

    select.change(function () {
      var converted = '',
          formated = '';

      fx.settings = { from: fx.base, to: this.value };
      converted = fx.convert(that.base_price);
      formated = accounting.formatMoney(converted, { symbol: this.value,  format: "%s %v", precision: "0" });

      $(that.total).text(formated);
    });
  },


  // Render Currency Options
  render: function () {

    var that = this,
        accumulator = [],
        frag = '';

    for (var propertyName in fx.rates) {
      accumulator.push(propertyName);
    }

    $.each(accumulator, function ( i, val ) {
      var the_price = $(document.createElement('option')).text(val);

      if (val == fx.base) {
        the_price.attr('selected', 'true');
      }

      // TODO: not optimal to run append through each iteration
      that.select.append(the_price);
    });

  },

  // Fetch & set conversion rates
  fetch: function () {

    var that = this;

    // Load exchange rates data via the cross-domain/AJAX proxy:
    $.getJSON(
        'http://openexchangerates.org/latest.json',
        function(data) {
          fx.rates = data.rates;
          fx.base = data.base;

          that.render();
        }
    );
  }
};

if ($('#currency-select')) {
  CurrencyConverter.init($('#price'), $('#currency-select'));
}

Answer 1

你的问题是范围。

init: function (total, select) {

    var that = this; // Ok, `that` is `init`...

    this.total = total;
    this.base_price = accounting.unformat(this.total.text());
    this.select = select; // So `init.select = select`...
    .
    .
    .

render : function () {
    var that = this, // Ok, `that` is `render`
    accumulator = [],
    frag = '';
    .
    .
    .
    that.select.append(the_price); // ?????

解决这个问题的最简单方法是创建构造函数而不是文字对象，这样您就可以将 $select 作为您可以在任何方法中访问的对象传递。

var CurrencyConverter = function($select){
    this.init = function(){ ... }
    this.render = function() { $select.append('...'); }
    .
    .
    .
};
var currency = new CurrencyConverter($('select'));