5

我有一个简单的类，它有一些方法（现在）。我可以实例化它并调用 init 函数，但我不能从onchange属性中调用另一个方法。

这是课程：

var ScheduleViewer = (function() {
var options = {
  container: 'trip_stops',
  schedule: {}
};

function ScheduleViewer (){};

ScheduleViewer.prototype.init = function(params) {
  $.extend(options, params);
  // setTimeout(function() {
  //   ScheduleViewer.addListener(options);
  // }, 3000);
  this.addListener(options);
}

ScheduleViewer.prototype.getSchedule = function(trip_id) {
  var _id = trip_id;
  console.log(_id);
}

ScheduleViewer.prototype.addListener = function(options) {
  console.log("adding listener");
   var _id = options.select_id;
   console.log($('#train_select').length);// zero assuming timing issue
   $('#'+_id).on('change', function() {
     alert("changed");
   })
}
return ScheduleViewer;
})();

通话

<div id="trip_stops" class="trip_options">
        <% if (trips.length > 0) {  %>
            <%
                var params = {
                schedule: schedule
              };
              var scheduler = new ScheduleViewer();
              scheduler.init(params);
            %>
            <select id="train_select">
                <option value="0" selected disabled>Select a train</option>
                <% $.each(trips, function(index, val) { %>
                    <option value="<%= val.trip_id %>">
                        <%= val.train_num %> Train
                    </option>
                <% }); %>
            </select>
        <% } else { %>
            No trips scheduled.
        <% } %>
    </div>

请注意，我使用 jqote 进行模板化。

我从 init 调用中获取日志，但随后在onchangewith中失败Uncaught ReferenceError: scheduler is not defined。我不确定我做错了什么。任何指针？

谢谢

编辑：我尝试添加一个在初始化时调用的侦听器。我假设由于时间问题，听众没有被绑定。现在这就是我尝试尝试的缺乏经验的地方，setTimeout但函数调用并没有按原样发生。

4

5 回答 5

2

我不知道为什么这可能不起作用，但无论如何你都不应该真正使用内联样式/函数。

为什么不尝试在脚本中获取元素并将onchange 函数应用于它。

var scheduler = new ScheduleViewer();
    select = document.getElementById('train_select');

scheduler.init(params);

select.onchange = function() {
   scheduler.getSchedule(this.value)
};
于 2013-08-01T17:20:56.727 回答
1

尝试在 javascript 中绑定事件并删除内联事件。

var scheduler = new ScheduleViewer();
scheduler.init(params);

$(document).on('change', '#select', function() {
   scheduler.getSchedule(this.value)
});
于 2013-08-01T17:20:50.667 回答
0

我对 jqote 不熟悉，但它看起来像是一个范围界定问题。如果您必须使用内联 onchange，请将对象引用放在窗口对象中并从那里访问它。

window['scheduler'] = new ScheduleViewer();
window['scheduler'].init(params);

和

<select id="train_select" onchange="window['scheduler'].getSchedule(this.value)">
于 2013-08-01T17:40:38.407 回答
0

我以前从未使用过 jQote，但这可能是因为 jQote 处理变量声明的方式吗？尝试scheduler在模板代码之外实例化您的对象。

<script>
var scheduler = new ScheduleViewer(),
    params = { schedule: schedule };

scheduler.init(params);
</script>

<!-- template code... -->

另请注意，按照您编写代码的方式，所有 ScheduleViewer 实例都将共享同一个options对象。我不确定你会用这个options对象做什么，但我想这不是想要的行为。

最后，就像其他人已经说过的那样，内联添加事件侦听器是一种不好的做法，您应该使用 JavaScript 以编程方式注册您的偶数处理程序。使用本机addEventListener函数或您喜欢的库的辅助函数。

于 2013-08-01T17:34:14.073 回答
0

所以为了解决这个问题，我最终将类添加到窗口对象。我遇到了监听器问题，因为加载模板的代码不够快并且没有发生绑定。

该类看起来像：

window.ScheduleViewer = (function() {
var options = {
  container: 'trip_stops',
  schedule: {}
};

this.init = function(params) {
  $.extend(options, params); 
}

this.getSchedule = function(trip_id) {
  var _id = trip_id;
  //Do some cool stuff with GTFS data
}
//More functions

return this;
})();

模板化的html：

<div id="trip_stops" class="trip_options">
        <% if (trips.length > 0) {  %>
            <%
                var params = {
                schedule: schedule
              };
              ScheduleViewer.init(params);
            %>
            <select id="train_select" onchange="ScheduleViewer.getSchedule(this.value)">
                <option value="0" selected disabled>Select a train</option>
                <% $.each(trips, function(index, val) { %>
                    <option value="<%= val.trip_id %>">
                        <%= val.train_num %> Train
                    </option>
                <% }); %>
            </select>
        <% } else { %>
            No trips scheduled.
        <% } %>
    </div>

谢谢大家的回复。

于 2013-08-02T00:27:52.050 回答