jsFiddle

Question

我正在使用jQuery UI SelectMenu插件（https://github.com/fnagel/jquery-ui），它允许的一个东西是它呈现列表项的方式的“格式”。描述如下;

格式：null，接受一个可以使用单个参数的函数用你想要的任何操作程度进行操纵和返回

所以我的问题是 - 如何将Knockout模板作为函数返回，以便我可以将模板用作渲染源？

这也是你可以玩的小提琴，但我也包括一些代码

jsFiddle

这基本上就是我的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 - 注意我有一个模板，我期望绑定到User。我试图在我的JavaScript中调用模板并将其作为格式参数传递 - 但它显然不起作用。

<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>

Answer 1

我检查了插件，它不是非常适合使用的Knockout。您需要创建自定义绑定。问题是，您用作格式的函数将不会收到每个选项的实际视图模型，它将接收选项文本和选项本身

你可以做的一件事是让选项文本成为JSON中的实际对象，然后以格式函数反序列化到对象并将其传递给渲染引擎，如

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

在编写示例时我刚刚意识到另一个问题，ko.renderTemplate需要一个html元素来应用模板，我不认为它只会在内存中创建一个html元素，它必须附加到DOM它的工作原理。

编辑：这是一种方法，只需注意它不是测试人员，因此可能存在错误。

http://jsfiddle.net/w9bsc/42/

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

Answer 2

如何查看文档和演示？它说“接受一个功能”。不像你在代码示例中那样使用jQuery对象。

请参阅此行以获取有效的回调函数：https://github.com/fnagel/jquery-ui/blob/selectmenu/demos/selectmenu/default.html#L58

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

jsFiddle

2 个答案: