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

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

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

I.第一选项

实现这一点的一种方法是覆盖_ComboBoxMenu的_Create选项，如下所示：

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;
    }
});

dojo.declare（“SearchBox”），dijit.form.ComboBox{
postMixInProperties:函数（）{
这是._popuwidget=newsearchboxmenu（）；
这是继承的（论点）；
}
});
declare（“SearchBoxMenu”，dijit.form.\u comboxmenu{
_createOption:函数（项，labelFunc）{
var menuitem=dojo.doc.createElement（“li”）；
menuitem.innerHTML=[
“
”，
“
”，store.getValue（项，“标题”），“
”，
“
标记：”，store.getValue（项，“标记”），“
”，
日期：，store.getValue（项，“日期”），“
”
“
”
].join（“”）
返回菜单项；
}
});

但是我（a）重写了一个私有类，然后（b）它是私有方法，所以如果dojo 1.6中这些类的方法签名发生了变化——我就有麻烦了。这使得这种方式有点不受欢迎

II。第二种选择

如果私有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"),

var myStore=new dojo.data.ItemFileReadStore({
数据：{
标识符：“标题”，
项目：[
{标题：“有趣的标题”，
标签：“标题，栏”，
日期：“2010年6月12日”，
标签：
有趣的标题
+标签：标题栏
+日期：2010年6月12日
]
}
});
var-box=新的dijit.form.ComboBox({
商店：myStore，
searchAttr:“标题”，
labelAttr:“标签”，
标签类型：“html”
}“ipt1”），

LabelATR告诉组合框查看数据存储的项[]。在下拉菜单中标记并使用该项。“labelType”告诉_ComboBoxMenu将其作为HTML而不是简单字符串包含。正如我上面提到的，这种方法的一个缺点是它将数据与表示混合在一起

---

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

我认为没有更好的方法

---

就我个人而言，我会选择选项1，记录您正在使用的所有私有API，并在升级时检查。更好的办法是，提供一个用于挂接您自己的弹出窗口小部件的补丁并提交，确保下一个版本中有您希望看到的更改：）

答案在“自动完成”测试页面的富文本测试中描述：

唯一让我感觉好一点的是，我以前尝试过这个解决方案，但它在Dojo1.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");

var myStore=new dojo.data.ItemFileReadStore({
数据：{
标识符：“标题”，
项目：[
{标题：“有趣的标题”，
标签：“标题，栏”，
日期：“2010年6月12日”
]
}
});
var-box=新的dijit.form.ComboBox({
自动完成：false，
selectOnClick:true，
商店：myStore，
searchAttr:“标题”，
标签类型：“html”，
labelFunc:函数（项、存储）{
返回[
“
”，
“
”，store.getValue（项，“标题”），“
”，
“
标记：”，store.getValue（项，“标记”），“
”，
“
日期：”，store.getValue（项，“日期”），“
”，
“
”
].join（“”）
}
}“ipt1”）；

谢谢，汤姆。你是对的——如果我使用选项2，我需要编写一个检查私有API的单元测试。虽然我觉得这只是在回避问题。我现在还不想写补丁；在我完全理解这些表单小部件背后的原理之前。