Asp.net mvc 3 如何使用MVVM observable为剑道UI自动完成使用模板

我是剑道UI新手，仍然学到很多东西。我的要求是创建一个多列自动完成下拉列表。我使用带有模板的剑道UI自动完成文本框，跟随下面的链接。

但是，我找不到一个使用自动完成模板的示例

剑道，看得见

我使用MVVM observable将数据绑定到输入框，如下所示

 <div id="form-container">
    <h2>
        Advisors</h2>
    Select Advisor:
    <div class="autocomplete">
        <input id="div-template" data-role="autocomplete" data-text-field="AdvisorName" data-filter="contains" data-bind="source: advisorsSource, value: selectedAdvisor" />
    </div>
 </div>


<script type="text/javascript">

 $(document).ready(function () {

    var viewModel = kendo.observable({
        advisorsSource: new kendo.data.DataSource({
            minLength: 2,
            template: '<tr>' +
                    '<td>${ AdvisorCode }</dt><td>${ AdvisorName }</td><td>${ Organisation }</td>' +
                  '</tr>',
            transport: {
                type: "json",
                serverFiltering: true,
                read: "Home/Advisors",
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {
                            models: kendo.stringify(options.models)
                        };
                    }
                    return {
                        prefix: options.filter.filters[0].value
                    }; 
                }
            },
            schema: {
                model: { id: "AdvisorCode" }
            }               
        })
    });

    kendo.bind($("#form-container"), viewModel);
})

</script>

顾问
选择顾问：
$（文档）.ready（函数（）{
var viewModel=kendo.observable({
AdvisorSource:新建kendo.data.DataSource({
最小长度：2，
模板：“”+
“${AdvisorCode}${AdvisorName}${Organization}”+
'',
运输：{
键入：“json”，
是的，
改为：“家庭/顾问”，
parameterMap：功能（选项、操作）{
if（操作！=“读取”&&options.models）{
返回{
模型：kendo.stringify（options.models）
};
}
返回{
前缀：options.filter.filters[0]。值
}; 
}
},
模式：{
模型：{id:“AdvisorCode”}
}               
})
});
bind（$（“#表单容器”），viewModel）；
})

HomeController具有返回Json的操作，如下所示：

 public JsonResult Advisors(string prefix)      
 {
       var list = new List<Advisor>()
       {
              new Advisor { AdvisorCode = 002, AdvisorName = "Alex" , Organisation = "Blue Co"},
              new Advisor { AdvisorCode = 003, AdvisorName = "Foo" , Organisation = "Yellow Co"},
              new Advisor { AdvisorCode = 004, AdvisorName = "Smith", Organisation = "Green Co" },
              new Advisor { AdvisorCode = 005, AdvisorName = "David", Organisation = "Yellow Co" },
              new Advisor { AdvisorCode = 006, AdvisorName = "Alex" , Organisation = "Blue Co"},   
        };

        return Json(list, JsonRequestBehavior.AllowGet);
   }

publicjsonresult顾问（字符串前缀）
{
var list=新列表（）
{
新顾问{AdvisorCode=002，AdvisorName=“Alex”，organization=“Blue Co”}，
新顾问{AdvisorCode=003，AdvisorName=“Foo”，organization=“Yellow Co”}，
新顾问{AdvisorCode=004，AdvisorName=“Smith”，organization=“Green Co”}，
新顾问{AdvisorCode=005，AdvisorName=“David”，organization=“Yellow Co”}，
新顾问{AdvisorCode=006，AdvisorName=“Alex”，organization=“Blue Co”}，
};
返回Json（列表，JsonRequestBehavior.AllowGet）；
}

自动完成工作正常。然而，它只显示AdvisorName。似乎我的模板没有按预期工作

我需要在下拉列表中显示多列（AdvisorCode | AdvisorName | Organization），搜索应该基于这些列中的任何一列（而不仅仅是AdvisorName）

有谁能告诉我如何使用模板的正确方向，这样我就可以显示多列了吗

---

谢谢，非常感谢。

成功了！一旦我将模板属性移动到输入字段，它就会正常工作。例如，请参见下文

 <input id="advisorautocomp" data-role="autocomplete" 
 data-text-field="Name" data-filter="contains"
        data-bind="source: advisorsSource, value: selectedAdvisor" 
        data-template="template" />

注意：数据模板=“模板”

模板的定义如下（仅为示例）

${data.Code}${data.Name}

我不确定为什么javascript模板属性不能与kendo.observable一起使用，但是在这个阶段，上面的解决方案对我来说是可行的。我把同样的问题贴在了网上，希望他们能有一个完整的答案

 <script id="template" type="text/x-kendo-template">      
      <tr><td>${ data.Code }</td><td>${ data.Name }</td></tr>      
 </script>