1

私はノックアウトが初めてで、少し問題があります。ASP.Net MVC 4 アプリケーション、かみそりビュー、ノックアウト ViewModel があります。Web API コントローラーを使用してデータを取得していますが、それで ko.observableArray を初期化できません。

データを取得するコントローラー関数:

public IEnumerable<TaskModel> GetTasks()
{
    var tasks = new[] { new TaskModel { Name = "asd", Deadline = DateTime.Now, Id = new Guid() }, new TaskModel { Name = "asdfasdf", Deadline = DateTime.Now, Id = new Guid() } };
    return tasks;
}

ノックアウト ビュー モデル(コントローラーへの呼び出しは正しく、データ変数は null ではありません)

function TasksList() {
    var self = this;

    self.tasks = ko.observableArray([]);

    self.load = function() {
        $.ajax({
            type: "GET",
            url: "http://localhost:11701/api/TaskApi",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                self.tasks(data);
            },
            error: function(error) {
                alert(error.status + "<--and--> " + error.statusText);
            }
        });
    };
}

var tasksList = new TasksList();
tasksList.load();
ko.applyBindings(tasksList);

意見

@{
    ViewBag.Title = "Index";
}

@Scripts.Render("~/Scripts/jquery-1.8.3.js")
@Scripts.Render("~/Scripts/knockout-2.2.1.debug.js")
@Scripts.Render("~/Scripts/knockout.mapping-latest.debug.js")
@Scripts.Render("~/Scripts/Models/TasksList.js")

<h2>Tasks</h2>

<table>
    <tr>
        <th>Name
        </th>
        <th>Priority
        </th>
        <th>Deadline
        </th>
        <th>CreatedOn
        </th>
        <th></th>
    </tr>

    <tbody data-bind="foreach: tasks" >
        <tr>            
            <td data-bind="text: Name"></td>
            <td data-bind="text: Priority"></td>
            <td data-bind="text: Deadline"></td>
            <td data-bind="text: CreatedOn"></td>
        </tr>
    </tbody>
</table>

ko.mapping.fromJS と ko.mapping.fromJSON を試しましたが、まだ動作しません。何が間違っているのか分かりませんか? 前もって感謝します

4

1 に答える 1

3

私の意見では、あなたの問題はあなたがko.applyBindingsあなたのHTMLの前に持っているということです。ページの読み込み後にそのコードを呼び出します。

$(function() {
    var tasksList = new TasksList();
    tasksList.load();
    ko.applyBindings(tasksList);
});

または、少なくともjavascriptコードを本文の最後に移動します

于 2013-03-12T20:29:26.863 に答える