我把代码放到这个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比我更有经验的人可以解释为什么代码在你点击Add Person后没有重置两个输入文本框,First Name和Last Name吗?
请注意,我正在尝试通过在添加完成后调用this.NewPerson(pBlank)来重置它们。
答案 0 :(得分:0)
您的字段持久化的原因是因为您的pBlank对象没有获得新的可观察对象(即pBlanks字段在您更改时会更新)。 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));