2010-04-01 7 views
6

Tôi dường như không thể đính kèm chính xác sự kiện onchange vào một widget dijit.form.Select. Tuy nhiên, tôi mới phát triển web, vì vậy tôi có thể làm một cái gì đó hoàn toàn ngu ngốc (mặc dù, tốt nhất tôi có thể nói (và tôi đã đọc tất cả các tài liệu tôi có thể tìm thấy) Tôi không). Tôi đảm bảo rằng lớp cơ thể phù hợp với chủ đề dojo, rằng tôi dojo.require() cho tất cả các tiện ích tôi sử dụng (và dojo.parser), và vẫn còn, nada. Mã tôi đang sử dụng là:Tôi không thể onChange để bắn cho dijit.form.Select

dojo.addOnLoad(function() { 
    var _query = dojo.query('.toggle'); 
    for (var i in _query) { 
     dojo.connect(_query[i], 'onchange', function (ev) { 
      console.log(ev + ' fired onchange'); 
     }); 
    } 
}); 

Mọi trợ giúp sẽ được đánh giá cao.

Ngoài ra: sau khi đào sâu hơn vào bên trong cách dijit hiển thị tiện ích con, tôi phát hiện ra rằng khi tôi thêm cặp dojoType = 'dijit.form.Select' thuộc tính giá trị vào phần tử html của tôi (thực hiện điều này), dijit thực sự ám một bảng hai cột một hàng. Phần tử đầu tiên của bảng là một span (với lớp dijitSelectLabel) mà tôi giả định chỉ hiển thị phần tử được chọn (hoặc mặc định). Đó là yếu tố thứ hai có vẻ như là một nút được hiển thị dưới dạng mũi tên xuống để chuyển đổi hiển thị menu itmes để đáp lại một số sự kiện DOM nhất định. Ngoài ra (và tôi nghĩ điều này khá tiện lợi), dijit không thực sự đặt các tùy chọn được chọn trong cây DOM cho đến khi một trong những sự kiện đó được kích hoạt. Tôi đã xem HTML trong firebug ngay sau khi tải trang mới (trước khi tôi nhấp vào bất kỳ thứ gì) và tùy chọn thứ hai không phải là bất kỳ nơi nào để tìm thấy. Sau đó, một khi tôi nhấp vào nút mũi tên, có một widget dijit.Menu, dijit sẽ di chuyển một phần tử dijit.Menu đến cuối nút cơ thể; sau khi tôi nhấp vào một nơi khác, tiện ích Menu vẫn là lastChild của cơ thể, bây giờ nó chỉ ẩn và không được gắn vào biểu mẫu.Chọn tiện ích con.

Có nên thực sự phức tạp nếu tất cả những gì tôi muốn làm là đặt một widget dijit.form khác trong cây DOM tùy thuộc vào mục mà người dùng chọn?

Kết luận: Hóa ra đó là vấn đề viết hoa.

dojo.connect(widget_obj, 'onChange', function_obj); 
hoạt động, trong khi

dojo.connect(widget_obj, 'onchange', function_obj); 
thì không.

Vì vậy, tôi đã đúng rằng tôi đã hoàn toàn ngu ngốc. Tôi giả định rằng bởi vì tất cả các phiên bản chữ thường hoạt động khi đặt trong nó một thẻ html như một thuộc tính, Dojo sẽ đối xử với nó như nhau. Nó có ý nghĩa, bởi vì dijit.form.Select không có thuộc tính .onchange, nhưng có thuộc tính .onChange. (Tôi đã kết thúc bằng cách chọn .Chọn qua một .ilteringChọn bởi vì tôi không cho người dùng của mình có bất kỳ hiển thị nào mà họ có thể nhập vào nội dung nào đó.) Vì vậy, bạn sẽ trả lời cho ai trong số các bạn (vì cả hai bạn đã onChange trong bài viết của bạn, tôi đoán tôi chỉ là quá thiếu kinh nghiệm để nhận ra rằng trường hợp quan trọng)?

Trả lời

2

Hãy thử như sau khi thực hiện một dojo.connect:

var inputEvents = []; //Global var 

    inputEvents.push(dojo.connect(dijit.byId(inputFldStr), "onChange", eventFuncObj)); 

Store kết nối trong một var toàn cầu.

+0

Tôi đã thử cả hai dijit.byId (nodeId) và dijit.byNode (nút) và cách tiếp cận không hoạt động. – yarmiganosca

1

Trong mã của bạn, bạn kết nối một trình xử lý với sự kiện 'thay đổi' các nút dom, chứ không phải tiện ích dojo. dojo.query trả về cho bạn một đối tượng NodeList - một tập hợp các nút khớp với truy vấn.
Trong trường hợp này, nó đáng tin cậy hơn để kết nối với sự kiện 'onChange' của tiện ích, như GoinOff cho thấy. Chỉ cần một chút bổ sung cho câu trả lời của mình để đảm bảo rằng bạn đang làm điều này đúng.
Giả sử đây là html của bạn (trong các phiên bản sau của Dojo dijit.form.Select đã được thay thế bằng dijit.form.FilteringSelect):

<input dojoType="dijit.form.FilteringSelect" id="stateInput" store="stateStore" searchAttr="name" name="state"/> 

Sau đó, bạn sẽ kết nối với 'onChange' theo cách này (bạn cũng có thể lưu trữ các kết nối trong một số mảng để có thể ngắt kết nối nó sau này, như GoinOff gợi ý):

dojo.addOnLoad (function() { 
    dojo.connect(dijit.byId("stateInput"), "onChange", function(){}); 
} 

Nhưng đó là một câu chuyện khác nếu bạn không biết id của tiện ích con và muốn sử dụng dojo.query để kết nối với nhiều tiện ích con.

+0

Điều này không hoạt động (đặc biệt là vì các tùy chọn được hiển thị bên ngoài tiện ích cho đến khi tôi thay đổi nó thành