How to automatically load array from JSON using knockout

Question

I have been playing around with building an ASP.Net MVC4 Application with knockoutjs. I have a text box and a submit button; when the button is pressed whatever is in the textbox is sent to a database via json. I would like to use knockoutjs to immediately update whatever is in the database to the browser, but I have been unable to accomplish this.

Currently the app writes data from the browser to the db correctly and I am able to display it by adding a button that calls the All() function.

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

Partial 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" />-->

Partial View 2;

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

What is your specific problem? Show us the code you tried for the success handler. In addition, what would help us help you: create a fiddle that mocks out the $.ajax call. — Jeroen
– Jeroen, Commented Jan 13, 2014 at 7:03
Sorry, I am knew to knockoutjs (and my experience with Javascript is limited), I am not sure what a success handler or a fiddle is. As I explained above, I would like to load the input from the textbox imediately after the 'Add' button is pressed. Thanks for looking! — Zzz
– Zzz, Commented Jan 13, 2014 at 7:08
The success handler is in your code example. It is the function that gets called when the AJAX call returns successfully. With a fiddle I meant something like a jsfiddle with your code. — Jeroen
– Jeroen, Commented Jan 13, 2014 at 7:55

Goddard · Accepted Answer · 2014-01-13 07:53:44Z

In sample below, when user click Add button the new task will add to database via ajax call, after it successfully added into database the callback function success will work. In success method, we add new task ( in this case result object return from server side ) into the todos observable. So you don't need to call All method.

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

Collectives™ on Stack Overflow

How to automatically load array from JSON using knockout

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related