带有复杂下拉菜单的 dijit.form.ComboBox答案

【问题标题】：dijit.form.ComboBox with complex drop-down menu带有复杂下拉菜单的 dijit.form.ComboBox
【发布时间】：2011-02-22 06:37:36
【问题描述】：

我想创建一个更有趣的博客自动完成小部件；它将返回一个下拉菜单，其中包含：(a) 标题，(b) 关键字，(d) 日期。例如：

|======================
| inte|
|======================
| Interesting Title
| Tags: title, bar
| Date: Jun, 12 2010
|----------------------
| Interner Guide 
| Tags: guide
| Date: Aug, 12 2010
|----------------------
|          ...
|======================

我。第一个选项

实现此目的的一种方法是重写 _ComboBoxMenu 的 _createOption，如下所示：

dojo.declare("SearchBox", dijit.form.ComboBox, {
    postMixInProperties: function() {
        this._popupWidget = new SearchBoxMenu();
        this.inherited(arguments);
    }
});

dojo.declare("SearchBoxMenu", dijit.form._ComboBoxMenu, {
    _createOption: function(item, labelFunc) {
        var menuitem = dojo.doc.createElement("li");
        menuitem.innerHTML = [
            "<ul>",
                "<li>", store.getValue(item, "title"), "</li>",
                "<li>Tags: ", store.getValue(item, "tags"), "</li>",
                "<li>Date: ", store.getValue(item, "date"), "</li>"
            "</ul>"
        ].join("")
        return menuitem;
    }
});

但是我 (a) 覆盖了一个私有类，然后 (b) 它是私有方法，所以如果在 dojo 1.6 中这些类的方法签名发生变化——我会遇到麻烦。这使得这种方式有点不可取。

二。第二种选择

如果私有 API 签名发生变化，第二种方式不会中断，但会将数据与表示混合：

var myStore = new dojo.data.ItemFileReadStore({
    data: {
        identifier: "title",
        items:  [
            {title: "Interesting Title",
             tags: "title, bar",
             date: "Jun, 12 2010",
             label: "<ul><li>Interesting Title</li>"
                 + "<li>Tags: title, bar</li>"
                 + "<li>Date: Jun, 12 2010</li></ul>"}
        ]
    }
});

var box = new dijit.form.ComboBox({
    store: myStore,
    searchAttr: "title",
    labelAttr: "label",
    labelType: "html"
}, "ipt1"),

labelAttr 告诉 ComboBox 查看 dataStore 的 items[].label 并在下拉菜单中使用它。 “labelType”告诉 _ComboBoxMenu 将其作为 HTML 而不是简单的字符串包含在内。正如我上面提到的，这种方法的一个缺点是它将数据与表示混合在一起。

问题：因此，我有两个选择，但都不是完美的。有没有更好的办法？如果不是——你推荐哪一个？

【问题讨论】：

标签： dojo dijit.form

【解决方案1】：

“自动完成”测试页面上的富文本测试中描述了答案：http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/_autoComplete.html#richtextest。

唯一让我感觉好一点的是我之前尝试过这个解决方案，但它不适用于 dojo 1.5。它确实适用于夜间，并希望适用于所有后续的稳定版本。它是选项 2 和标签视图功能的组合：

var myStore = new dojo.data.ItemFileReadStore({
  data: {
        identifier: "title",
        items:  [
            {title: "Interesting Title",
             tags: "title, bar",
             date: "Jun, 12 2010"}
        ]
    }
});

var box = new dijit.form.ComboBox({
    autoComplete: false,
    selectOnClick: true,
    store: myStore,
    searchAttr: "title",
    labelType: "html",
    labelFunc: function(item, store) {
        return [
            "<ul>",
                "<li>", store.getValue(item, "title"), "</li>",
                "<li>Tags:", store.getValue(item, "tags"), "</li>",
                "<li>Date:", store.getValue(item, "date"), "</li>",
            "</ul>"
        ].join("")
    }
}, "ipt1");

【讨论】：

【解决方案2】：

我认为没有更好的方法。

我个人会选择选项 1，并记录您正在使用的所有私有 API，并应在升级时检查。更好的是，提供一个用于挂钩您自己的弹出窗口小部件的补丁并提交它，确保下一个版本具有您想要在其中看到的更改:)

【讨论】：

谢谢，汤姆。你是对的——如果我选择了选项 2，我需要编写一个单元测试来检查私有 api。虽然我确实觉得这只是在规避这个问题。我还不想写补丁；在我完全理解这些表单小部件背后的哲学之前。