Question

我正在关注此链接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' event runs twice on webkit 使用dojox搜索框的解决方法。我怎么能在我的情况下实现它？

Answer 1

您应该从不尝试通过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，但this topic表示它返回一个包含remove()函数的对象，可以删除事件监听器。

我不认为这是可能的。如果要从数据库/ webservice中检索数据，可以使用dojo/store/JsonRest存储（RESTful webservices），也可以实现自己的存储（或获取数据并将其放在dojo/store/Memory中）。

Dojo选择了一个名为store API的数据实现的抽象层。这些的优点在于，因为它是一个抽象层，您可以将您的商店用于多种目的（所有Dijit小部件，Dojo移动小部件......）的工作方式与他们使用商店的方式类似。

Answer 2

关于你问题的这一部分：

我正在关注此链接dojox/mobile/SearchBox 'onSearch' event runs twice on webkit以使用dojox搜索框的解决方法。我怎么能在我的情况下实现它呢？

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

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

Answer 3

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

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

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

现在，store变量本身在SearchController中实例化。因此，您必须确保在解析器运行之前将subscription()称为。但是，subscription()方法依次尝试查找名为“searchbox”的小部件。因此，必须在 subscription()之前将解析器称为。如你所知，这不会起作用：）

所以你必须重写一下SearchController。例如，您可以从store:store中移除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.

如何在Dojox Searchbox上使用dojo？

3 个答案: