2

私はjQueryUISelectMenuプラグイン（https://github.com/fnagel/jquery-ui）を使用していますが、それが許可するものの1つは、リストアイテムをレンダリングする方法の「フォーマット」です。次のように説明されます。

format：null、任意のレベルの操作で操作および返すことができる単一の引数を持つ関数を受け入れます

だから私の質問は-ノックアウトテンプレートを関数として返して、このテンプレートをレンダリングソースとして使用できるようにするにはどうすればよいですか？

これもおもちゃにできるフィドルですが、コードの一部も含まれています

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でテンプレートを呼び出して、それを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>

</ p>

4

2 に答える 2

2

私はプラグインがあまりノックアウトフレンドリーではないことを確認しました。カスタム バインディングを作成する必要があります。問題は、フォーマットとして使用する関数が、オプション テキストとオプション自体を受け取る各オプションの実際のビューモデルを受け取らないことです。

あなたができる1つのハックは、オプションテキストを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 に答える