asp.net-mvc - Knockout.js を使用して JSON 配列を HTML リストにバインドする

Question

私はノックアウト.jsフレームワークが初めてで、JSON配列をHTML ULリストにバインドするというかなり単純な問題に悩まされています。HTML マークアップを以下に示します。

<div id="genres">
    <ul data-bind="foreach: GenreCollection">
        <li>
            <a href="#"><span data-bind="text: $data"></span></a>
        </li>
    </ul>
</div>

次のマークアップを使用して、テンプレート バインディングのデータとして入ってくる JSON データをキャプチャしました。

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

JSON 出力は次のとおりです。

{
  "GenreCollection": [
    "Action & Adventure",
    "Action Comedies",
    "Action Sci-Fi & Fantasy",
    "Action Thrillers",
    "Anime Action",
    "Bollywood Action & Adventure",
    "British Action & Adventure",
    "Classic Action & Adventure",
    "Crime Action & Adventure",
    "Foreign Action & Adventure",
    "Independent Action & Adventure",
    "Military Action & Adventure",
    "Spy Action & Adventure",
    "TV Action & Adventure"
  ]
}

ビューモデル:

    function viewModel(){
        var self = this;
        self.GenreCollection = ko.observableArray([]);

        self.addData = function (data) {
        for (var item in data) {            
            self.GenreCollection.push(data[item]);
        }
    }
}

GenreNamespace.bindData = function (data) {
    var obj = new viewModel();
    obj.addData(data);
    ko.applyBindings(obj);
}

GenreNamespace.getData = function (searchText) {
    $.ajax({
        url: 'Genre/SearchGenre',
        type: 'POST',
        data: JSON.stringify(searchText),
        dataType: 'json',
        processData: false,
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            GenreNamespace.bindData(data);
        },
        error: function (message) {
            alert(message);
        }
    });
}

上記のHTMLテンプレートの問題が何であるかを理解するのに役立つ人はいますか。私は VS 2012 と Knockout 2.1 フレームワークを使用しています。

ありがとう