Question

I put my code into this jsFiddle here:
http://jsfiddle.net/damianofusco/ngFM9/

function Person(data) {
    this.Id = data.Id;
    this.FirstName = ko.observable(data.FirstName);
    this.LastName = ko.observable(data.LastName);
    this.FriendlyName = ko.computed(function() {
        return this.Id + ' ' + this.FirstName() + ' ' + this.LastName();
    }, this);
    this.HasValues = ko.computed(function() {
        return this.FirstName().length > 0 && this.LastName().length > 0;
    }, this);
}

var pBlank = new Person({
    Id: 0,
    FirstName: "",
    LastName: ""
});

var p1 = new Person({
    Id: 1,
    FirstName: "Damiano",
    LastName: "Fusco"
});

var p2 = new Person({
    Id: 2,
    FirstName: "John",
    LastName: "Doe"
});

window.myVM = {
    People: ko.observableArray([p1, p2]),
    NewPerson: ko.observable(pBlank),
    AddPerson: function() {
        var newid = this.People().length + 1;
        var newItem = new Person({
            Id: newid,
            FirstName: this.NewPerson().FirstName(),
            LastName: this.NewPerson().LastName()
        });
        console.log(newItem.FriendlyName());
        this.People.push(newItem);
        this.NewPerson(pBlank);
    }
};

window.myVM.People.subscribe(function() {
    console.log('People changed');
});

window.myVM.NewPerson.subscribe(function() {
    console.log('NewPerson changed');
});

window.myVM.NewPerson().FirstName.subscribe(function() {
    console.log('NewPerson.FirstName changed');
});

Can somebody who has more experience than me with Knockout explain why the code is not resetting the two input textboxes, First Name and Last Name, after you click Add Person?

Note that I’m trying to reset them by calling this.NewPerson(pBlank) just after I’m done adding.

Answer 1

The reason your fields are persisting is because your pBlank object isn’t getting new observables (i.e. pBlanks fields are updating as you change them). http://jsfiddle.net/ngFM9/2/.

Here’s how I would do.
http://jsfiddle.net/ngFM9/1/ (I made quite a few changes)

HTML

        <div class="ui-widget">
            <div class="ui-widget-header" style="padding:5px">People</div>
            <div class="ui-widget-content" style="padding:5px;height:100%">
                <ul class="selectSingle" id="ulPeople" data-bind="foreach: People">
                    <li class="ui-widget-content" data-bind="text: FriendlyName"></li>
                </ul>


                <form data-bind="submit: AddPerson">
                    <span>First:</span><input type="text" data-bind="value: fname"/>
                    <br/><span>Last:</span><input type="text" data-bind="value: lastname"/>
                    <br/><input type="submit" value="Add Person"/>
                </form>
            </div>
        </div>

JS

function Person(id, fname, lastname) {
    this.Id = ko.observable(id);
    this.FirstName = ko.observable(fname);
    this.LastName = ko.observable(lastname);
    this.FriendlyName = ko.computed(function() {
        return this.Id() + ' ' + this.FirstName() + ' ' + this.LastName();
    }, this);
}

var p1 = new Person(1, "Damiano", "Fusco");

var myVM = function(p1){

    this.People = ko.observableArray([p1]);

    this.fname = ko.observable();
    this.lastname = ko.observable();

    this.AddPerson = function() {
        var newid = this.People().length + 1;
        var newItem = new Person(newid, this.fname(), this.lastname());
        this.People.push(newItem);

        this.fname('');
        this.lastname('');

    }
};

ko.applyBindings(new myVM(p1));