0

我正在关注此链接http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/SearchBox.html并尝试在我的应用程序中做同样的事情。唯一的区别是我想使用“dojo On”来使用“onSearch”事件，但我无法读取我们在 onSearch 函数中默认获得的结果、查询和选项。请帮助我解决这个问题。

我的 HTML 代码：

 <input data-dojo-type="dojox/mobile/SearchBox" type="search" placeHolder="Search"
 data-dojo-props='store:store, searchAttr: "label", ignoreCase: true, pageSize:2'> 

<ul data-dojo-type="dojox/mobile/RoundRectList" jsId="list"></ul>

我的 JS 代码：

    define(["dojo/has",
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/_base/array",
    "dojo/dom",
    "dojo/dom-class",
    "dojo/dom-construct",
    "dojo/query",
    "dojo/dom-style",
    "dojo/dom-attr",
    "dojo/on",
    "dojo/_base/Deferred",
    "dojo/topic",
    "dojo/_base/connect",
    "dijit/registry",
    "dojo/store/Memory",
    "dojox/mobile/SearchBox",
    "dojo/selector/acme"
    ],
   function(has,declare,lang,array,dom,domClass,domConstruct,query,domStyle,domAttr,on,Deferred,topic,connect,registry,MemoryStore,SearchBox)
   {

   declare("controllers.SearchController", [], {
           started:false,
           constructor : function(args) {
           WL.Logger.debug("SearchController created");
           lang.mixin(this,args);
           },

           start:function(){

               if(!this.started)
               {

               console.log("i am in SearchController.start");

               this.subscription();
               this.started = true;

               }
               },

           subscription:function(){

               store = new MemoryStore({data: [
                                               {label: "Alabama"},
                                               {label: "Alaska"},
                                               {label: "American Samoa"},
                                               {label: "Arizona"},
                                               {label: "Arkansas"},
                                               {label: "Kansas"},
                                               {label: "Kentucky"}
                                             ]});



               var searchbox=registry.byId("searchbox");
              on(searchbox.domNode,"search",lang.hitch(this,this.onSearch));       

           },

           onSearch: function (results, query, options) {

          //  this.onSearch = function () {};
            console.log(results);

        }

           });
   return controllers.SearchController;
   }
   );

另外，我正在关注此链接dojox/mobile/SearchBox 'onSearch' 事件在 webkit 上运行两次， 以使用 dojox 搜索框的解决方法。我该如何在我的情况下实施它？

4

3 回答 3

2

您永远不应该尝试通过 DOM 节点访问小部件事件。小部件和 DOM 节点之间是有区别的，这就是其中之一。另外，因为dojo/on只能与 DOM 节点和 DOM 事件一起使用，所以不能使用它来处理onSearch事件。

每个小部件都有一个on()可用于附加小部件事件处理程序的功能。例如：

searchbox.on("search", lang.hitch(this, this.onSearch));

如果事件运行两次，你可以尝试做这样的事情（你可能不得不在你的面向对象设计中重写它）：

var myEventHandler = searchbox.on("search", lang.hitch(this, this.onSearch());
myEventHandler.remove();

根据 API 文档，该on()函数的返回值为undefined，但本主题声明它返回一个对象，其中包含remove()能够删除事件侦听器的函数。

我不认为这是可能的。如果你想从你的数据库/网络服务中检索数据，你可以使用dojo/store/JsonRest存储（RESTful webservices）或者你可以实现你自己的存储（或获取数据并将其放入一个dojo/store/Memory）。

Dojo 在您的数据实现上选择一个抽象层，称为存储 API。这样做的好处是，因为它是一个抽象层，所以您可以将商店用于多种用途（所有 Dijit 小部件、Dojo 移动小部件……），其工作方式与使用商店的方式相似。

于 2014-01-14T11:16:31.497 回答
2

关于你问题的这一部分：

我正在关注此链接dojox/mobile/SearchBox 'onSearch' 事件在 webkit 上运行两次，以使用 dojox 搜索框的解决方法。我该如何在我的情况下实施它？

我认为不需要这样的解决方法。正如我在此答案中所写，只要您指定了商店， SearchBox.onSearch() 就应该只调用一次。

简而言之：只是不要应用这种解决方法，它不应该是必要的。

于 2014-02-04T17:07:10.853 回答
1

除了 Dmitri 指出的事件错误之外，还有执行顺序的问题。

Dojo 何时解析您的 HTML？你parseOnLoad:true的dojoConfig（或data-dojo-config）中有吗？

当解析器到达data-dojo-type="dojox/mobile/SearchBox"时，它将尝试实例化一个 SearchBox 小部件。因为您已store:store在其属性中指定，所以它将查找名为store.

现在，store变量本身在 SearchController 中被实例化。所以你必须确保在解析器运行之前subscription()调用它。但是，该方法又会尝试查找名为“搜索框”的小部件。所以必须先调用解析器。如您所知，这行不通:)subscription() subscription()

所以你必须稍微重写一下 SearchController。例如，您可以删除store:storefrom data-dojo-props，并让控制器在subscription方法中设置它：

var store = new MemoryStore({data: [....]});
var searchbox = registry.byId("searchbox");

searchbox.set("store", store);
searchbox.on("search", lang.hitch(this, this.onSearch)); // See Dmitri's answer.
于 2014-01-14T11:24:29.033 回答