Jquery ui KnockoutJS-将模板作为函数结果返回

我正在使用jQueryUISelectMenu插件(https://github.com/fnagel/jquery-ui)它允许的一件事是它呈现列表项的方式的“格式”。描述如下

格式：null，接受具有单个参数的函数，该参数可以为 操纵并返回任意级别的操纵

所以我的问题是-我怎样才能返回一个敲除模板作为一个函数，这样我就可以使用该模板作为这个函数的渲染源呢

这里有一把小提琴，你也可以玩，但我也包括一些代码

这就是我的viewModel的基本外观

$(document).ready(function(){
    function User(id, name, points) {
        this.Id = ko.observable(id);
        this.Name = ko.observable(name);
        this.Points = ko.observable(points);
    }

    var viewModel = {
        Users: ko.observableArray([
            new User("users/1", "Stacey", 27),
            new User("users/2", "Ciel", 30)
            ]),
        Selected: ko.observable()
    };

    ko.applyBindings(viewModel);

    $template = $('#user-template');

    $('select').selectmenu({
        format: $template
    });
});​

与之匹配的HTML-注意，我有一个模板，我希望绑定到

用户

。我试图在JavaScript中调用模板并将其作为format参数传递，但显然不起作用

<select id="users" 
    data-bind="options: Users, 
    optionsCaption: 'select a user...', 
    optionsText: 'Name', 
    value: Selected, 
    valueUpdate: blur">
</select>
<span data-bind="with: Selected">
    <div data-bind="text: Name"></div>
    <div data-bind="text: Id"></div>
</span>

<script type="text/html" id="user-template">
    <h1 data-bind="text: Id"></h1>
    <h3 data-bind="text: Name"></h3>
</script>

---

​

我检查了插件，它不太适合使用。您需要创建一个自定义绑定。问题在于，用作格式的函数不会接收每个选项的实际viewmodel，它将接收选项文本和选项本身

您可以做的一个技巧是让选项text成为JSON中的实际对象，然后在format函数中反序列化该对象并将其传递给渲染引擎，类似于

function(text, opt){
   var item = ko.mapping.fromJSON(text);
   ko.renderTemplate(rowTemplate, bindingContext.createChildContext(item), **problem here**, "replaceChildren");
}

在编写示例时，我刚刚意识到另一个问题，ko.renderTemplate需要一个html元素来应用该模板，我认为仅在内存中创建一个html元素是行不通的，它必须连接到DOM才能工作

编辑：这里有一种方法，只需注意它不是很好，所以可能会有bug。

format=函数（文本，选项）{
var index=选项[0]。索引；
if（index==0&&caption！==undefined）返回文本；
如果（标题！==未定义）索引--；
虚拟变量=$（“”）；
ko.renderTemplate（模板，bindingContext.createChildContext（items[index]），null，dummy[0]，“replaceChildren”）；
返回dummy.html（）；
};

看看文档和演示怎么样？上面写着“接受一个函数”。不是像代码示例中那样的jQuery对象

---

有关有效的回调函数，请参见这一行：

事实上，我发现除了格式化选项之外，它非常友好。到目前为止，ko的其他功能都很容易实现。谢谢你，我将尝试跟随这条线索，看看它能产生什么效果。可能无法完成我正在尝试的操作，但我知道我以前见过作为函数传递的模板。而且，我不一定要呈现模板。如果有办法使其在发布绑定后呈现。我基本上是在尝试返回一个模板作为函数中的HTML，并将其呈现在那里。如果您提供一个JSFIDLE，其中包含所有链接到CDN中的内容，我可以看看它。问题的顶部有一个这样的问题。所有CDN内容都链接在参考资料中。我不得不做一个selectmenu项目的分支，并发布一个github页面…东西，为实际的插件提供一个javascript文件，以使它能够很好地与JSFIDLE配合使用。在我昨晚的心境中，我无法理解它们——然而，在今天有机会坐久一点之后，我对正在发生的事情有了更多的了解。不过，我坚持我的问题。我想知道这是否能实现。看起来传递的第二个参数实际上是DOM节点（如果我错了，请随时纠正我），这可能是我需要的挂钩，使之成为可能。目前，这个selectmenu可能是可用的最好的一个。我花了很长时间在互联网上寻找替代方案，我总是回到这一点上——即使是你的旧版本也比我在那里发现的大多数版本更有用，而且它甚至可以接受函数作为其渲染参数的一部分，这一事实使它更具吸引力。我对制作这种插件的人有更多的信心，因为我对javascript的知识有限，而且我已经看到KO中的模板做了一些非常惊人的事情。我想我要说的是-你的selectmenu非常棒。你知道我们正在创建一个新的菜单吗，它有望包含在jQueryUI1.11中？查看jQuery GitHub帐户，选择Menu branch！format选项必须是函数，并且对于每个本机选项，它必须在init上被调用。函数传递选项文本和选项元素本身。您需要返回一个字符串（简单文本或HTML）。就这些。这有用吗？我对knockoutjs不太熟悉。

format = function(text, option) {
    var index = option[0].index;
    if(index == 0 && caption !== undefined) return text;
    if(caption !== undefined) index--;

    var dummy = $("<div />");
    ko.renderTemplate(template, bindingContext.createChildContext(items[index]), null, dummy[0], "replaceChildren");

    return dummy.html();
};