如何将 dojo On 与 Dojox 搜索框一起使用？

Posted 2023-02-16

【中文标题】如何将 dojo On 与 Dojox 搜索框一起使用？

【英文标题】：How to use dojo On with Dojox Searchbox?

【发布时间】：2014-01-14 09:42:19

【问题描述】：

我正在关注此链接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 搜索框的解决方法。我该如何在我的情况下实施它？

【参考方案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() 函数。

---

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

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

【讨论】：

非常感谢 Dimitri 回答这个问题。你和 Frode 的回答解决了我的问题。

Dimitri.. 我还有一个问题.. 我们可以在不使用任何商店的情况下使用 dojox 搜索框吗？假设我只想使用搜索框中的查询字符串直接从数据库中获取数据或使用任何 Web 服务......这个条件可以用 dojox 搜索框实现吗？

我用你的问题更新了我的答案。简短的回答：不（至少我不这么认为）。如果您想使用某项服务，您应该创建自己的商店或使用现有商店之一。

实际上，我正在使用 IBM Worklight 框架，并希望使用它的 httpadapter 功能使用搜索框中的查询字符串用户类型从 Web 服务中获取数据，然后按 Enter。我对 Searchbox 的唯一需要是获取查询字符串并使用 onSearch 函数中的查询字符串使用 httpadapter 获取整个数据。没有道场商店有没有办法做到这一点？

就像我告诉你的那样，不。您可以将 HttpAdapter 的数据放在内存存储中。还有一个项目充当 Worklight 中 JSONStore 的适配器，有关它的更多信息可以在 github.com/ibm-dojo/dworklight 找到。

【参考方案2】：

关于你的这部分问题：

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

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

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

【参考方案3】：

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

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

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

现在，store 变量本身在 SearchController 中被实例化。所以你必须确保subscription() 在解析器运行之前被调用。但是，subscription() 方法又会尝试查找名为“searchbox”的小部件。所以解析器必须在 before 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.

【讨论】：

嗨，Frode.. 我还有一个问题，尽管我也向 Dimitri 提出了这个问题.. 我们可以在不使用任何商店的情况下使用 dojox 搜索框吗？假设我只想使用搜索框中的查询字符串直接从数据库中获取数据或使用任何 Web 服务......这个条件可以用 dojox 搜索框实现吗？

正如 Dimitri 已经回答的那样，不。更准确地说，您需要设置 SearchBox 的“store”属性或其“list”属性（请参阅dojotoolkit.org/reference-guide/1.9/dojox/mobile/…）。在这两种情况下都使用了商店（在第二种情况下，它是在内部创建的）。