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 で私よりも経験のある人は、[人を追加] をクリックした後、コードが 2 つの入力テキスト ボックス、名と姓をリセットしない理由を説明できますか?

追加が完了した直後に this.NewPerson(pBlank) を呼び出して、それらをリセットしようとしていることに注意してください。

4

1 に答える 1

0

フィールドが持続する理由は、pBlank オブジェクトが新しいオブザーバブルを取得していないためです (つまり、変更すると 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 に答える