2

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

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

​</p>

4

2 回答 2

2

我检查了该插件，它不是很适合使用 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();
};
于 2012-12-16T11:47:50.967 回答
0

看看文档和演示怎么样？它说“接受一个功能”。不是您在代码示例中所做的 jQuery 对象。

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

于 2012-12-16T15:27:16.670 回答