3

私はサーバーで構築された準備ができている HTML を含むページを持っています。

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

この要素をビュー モデルにリンクする必要があります。呼び出した後に別の言葉で言えば、既存の HTML からその値を取得し'ko.applyBindings(viewModel, $('#list')[0])'たいと思います。viewModelだから私は次のことをします：

<ul id="list" data-bind="foreach: items">
    <li data-bind="text: title">Item 1</li>
    <li data-bind="text: title">Item 2</li>
</ul>

上記の要素から配列viewModelを取得することを期待しています。itemsしかし、結果として DOM はクリアされます。

4

1 に答える 1

1

サーバーからのhtmlをビューモデルにバインドする方法はないと思います。

したがって、既存の HTML からビュー モデルをリバース エンジニアリングしようとしているということは、探している結果を生成するために DOM をトラバースする必要があるということです。

したがって、バインディングを使用してリストの名前を変更し、適用バインディングが 1 つのターゲットを持つようにします。

<ul id="list2" data-bind="foreach: Items">
    <li data-bind="text: title"></li>

次に、ノックアウトを使用できなかった元の html のリストを調べて、dom をトラバースして値を取得する必要があります。 

    var viewModel = {
       Items= ko.observableArray();
    }

    //select your list
    var list = $('#list');

    //iterate through the children and add to the observable array
    ko.utils.arrayForEach(list.children(),function(i){
        viewModel.Items.push({Title:i.text()});
    }

     //then you can bind the view model to your html that has the knockout bindings

     ko.applyBindings(viewModel, )
</script>
于 2015-02-16T22:17:47.010 に答える