0

我把我的代码放到这个 jsFiddle 里：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');
});

在 Knockout 方面比我有更多经验的人可以解释为什么在单击“添加人员”后代码没有重置两个输入文本框，名字和姓氏？

请注意，我正在尝试通过在完成添加后调用 this.NewPerson(pBlank) 来重置它们。

4

1 回答 1

0

您的字段持续存在的原因是因为您的 pBlank 对象没有获得新的 observables（即 pBlank 字段在您更改它们时正在更新）。http://jsfiddle.net/ngFM9/2/。

这就是我会怎么做。 http://jsfiddle.net/ngFM9/1/（我做了很多改动）

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));
于 2012-11-02T22:17:03.003 回答