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'));
});

部分视图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" />-->

部分视图2;

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

Answer 1

在下面的示例中，当用户单击添加按钮时，新任务将通过ajax调用添加到数据库，在成功添加到数据库后，回调函数成功将起作用。在成功方法中，我们将新任务（在这种情况下，结果对象从服务器端返回）添加到 todos observable中。因此，您无需调用所有方法。

的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

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

1 个答案: