javascript - 如何使用 knockout 自动从 JSON 加载数组

Question

我一直在尝试使用 knockoutjs 构建 ASP.Net MVC4 应用程序。我有一个文本框和一个提交按钮；当按下按钮时，文本框中的任何内容都会通过 json 发送到数据库。我想使用knockoutjs立即将数据库中的任何内容更新到浏览器，但我一直无法完成此操作。

目前，应用程序正确地将数据从浏览器写入数据库，我可以通过添加一个调用 All() 函数的按钮来显示它。

JS:

function todo(id, isComplete, task) {
    var self = this;

    self.Id = id;
    self.IsComplete = isComplete;
    self.Task = task,         

    self.Attach = function () {
        $.ajax({
            url: "/api/Todos/",
            type: 'post',
            data: ko.toJSON(this),
            contentType: 'application/json',
            success: function (result) {
            }
        });
    }
}

function todoVM() {
    var self = this;
    self.todos = ko.observableArray([]);
    self.All = function () {
        self.todos.removeAll();
        $.getJSON("/api/Todos/", function (data) {
            $.each(data, function (key, val) {
                self.todos.push(new todo(val.Id, val.IsComplete, val.Task));
            });
        });
    };
    return self;
}

$(document).ready(function () {
    ko.applyBindings(new todoVM(), document.getElementById('display'));
    ko.applyBindings(new todo(), document.getElementById('add'));
});

部分 View 1:

<div data-bind="foreach: todos">
    <input type="checkbox" data-bind="checked: IsComplete" />
    <input class="todoItemInput" type="text" data-bind="value: Task, disable: IsComplete, blurOnEnter: true" />                        
</div>
<!--<input type="button" id="btnGet" value="Get Todos" data-bind="click: All" />-->

部分 View 2；

<input type="text" data-bind="value: Task" />
<input type="button"  value="Add" data-bind="click: Attach" />

Answer 1

在下面的示例中，当用户单击添加按钮时，新任务将通过ajax调用添加到数据库，成功添加到数据库后，回调函数success将起作用。在 success 方法中，我们将新任务(在本例中是从服务器端返回的结果对象)添加到 todos 可观察对象中。所以你不需要调用All方法。

JavaScript

function todo(id, isComplete, task) {
    var self = this;

    self.Id = id;
    self.IsComplete = isComplete;
    self.Task = task,         
}

function todoVM() {
    var self = this;
    self.todos = ko.observableArray([]);
    self.newTask=ko.observable();
    self.All = function () {
        self.todos.removeAll();
        $.getJSON("/api/Todos/", function (data) {
            $.each(data, function (key, val) {
                self.todos.push(new todo(val.Id, val.IsComplete, val.Task));
            });
        });
    };
    self.Attach = function () {
        $.ajax({
            url: "/api/Todos/",
            type: 'post',
            data: ko.toJSON(self.newTask()),
            contentType: 'application/json',
            success: function (result) {
                self.todos.push(new todo(result.Id,
                                         result.IsComplete,
                                         result.Task)); 

        });
    };
    return self;
}

$(document).ready(function () {
    ko.applyBindings(new todoVM(), document.getElementById('display'));
});

HTML

<div id='display'>
    <div data-bind="foreach: todos">
        <input type="checkbox" data-bind="checked: IsComplete" />
        <input class="todoItemInput" type="text" data-bind="value: Task,
           disable: IsComplete, blurOnEnter: true" />                        
    </div>
    <input type="text" data-bind="value: newTask" />
    <input type="button"  value="Add" data-bind="click: Attach" />
</div>

For Reference