4
使用視圖模型時，「本」的問題請參閱以下更新的代碼的打字稿及淘汰賽
我試圖用基因敲除與打字稿，但似乎我不能到我的打字稿視圖模型綁定我的看法...看來我與this一個問題，但我不明白爲什麼...
的this.UserList調用Fill方法
這裏的時候是不確定的是我的視圖模型：
module ViewModels {
export class UserViewModel {
constructor() {
this.UserList = ko.observableArray<KnockoutObservable<Models.User>>([]);
this.RemoveItem = <(user: KnockoutObservable<Models.User>) => void> this.RemoveItem.bind(this);
this.AcceptItem = <(user: Models.User) => void> this.AcceptItem.bind(this);
this.AddItem = <() => void> this.AddItem.bind(this);
}
public UserList: KnockoutObservableArray<KnockoutObservable<Models.User>>;
public Fill() {
$.ajax({
type: "POST",
url: "/Guest/LoadGuest/",
success: data=> {
$(data).each((index: any, item)=> {
var guest = new Models.User();
guest.FirstName = ko.observable(item.firstName);
guest.LastName = ko.observable(item.lastName);
guest.IsNew = ko.observable(false);
this.UserList.push(ko.observable(guest));
});
}
});
}
public AddItem() {
var guest = new Models.User();
guest.FirstName = ko.observable("");
guest.LastName = ko.observable("");
guest.IsNew = ko.observable(true);
this.UserList.push(ko.observable(guest));
}
public AcceptItem(user: Models.User) {
user.IsNew = ko.observable(false);
}
public RemoveItem(user: KnockoutObservable<Models.User>) {
this.UserList.remove(user);
}
}
}
這是我的觀點：
<table>
<thead>
<tr><th>Prénom</th><th>Nom de famille</th></tr>
</thead>
<tbody data-bind="foreach: UserList">
<tr data-bind="if:IsNew">
<td><input type="text" data-bind="text: FirstName" /></td>
<td><input type="text" data-bind="text: LastName" /></td>
<td><a data-bind="click:$parent.AcceptItem">OK</a><a data-bind="click:$parent.RemoveItem">Annuler</a></td>
</tr>
<tr data-bind="if:!IsNew">
<td data-bind="text: FirstName"></td>
<td data-bind="text: LastName"></td>
<td></td>
</tr>
</tbody>
</table>
<a id="AddGuest" data-bind="click:AddItem">Add</a>
@section scripts{
<script src="~/Scripts/models/ModelBase.js"></script>
<script src="~/Scripts/models/User.js"></script>
<script src="~/Scripts/viewmodels/UserViewModel.js"></script>
<script>
var vm = new ViewModels.UserViewModel();
vm.Fill();
ko.applyBindings(vm);
</script>
}
這裏是我的模型：
module Models{
export class User extends Models.ModelBase {
constructor() {
super();
}
public FirstName: KnockoutObservable<string>;
public LastName: KnockoutObservable<string>;
public Age: KnockoutObservable<Age>;
}
export class Age {
public ID: KnockoutObservable<number>;
public Description: KnockoutObservable<string>;
}
}
新的工作代碼幫助旨意：
視圖模型：
module ViewModels {
export class UserViewModel {
constructor() {
}
public UserList: KnockoutObservableArray<Models.User> = ko.observableArray<Models.User>([]);
public Fill =() => {
$.ajax({
type: "POST",
url: "/Guest/LoadGuest/",
success: data=> {
for (var i = 0; i < data.length; i++) {
var item = data[i];
var guest = new Models.User();
guest.FirstName(item.firstName);
guest.LastName(item.lastName);
guest.Age().Description("Test Age");
guest.IsNew(false);
this.UserList.push(guest);
}
}
});
}
public AddItem =() => {
var guest = new Models.User();
guest.FirstName = ko.observable("");
guest.LastName = ko.observable("");
guest.IsNew(true);
this.UserList.push(guest);
}
public AcceptItem = (user: Models.User) => {
user.IsNew(false);
}
public RemoveItem = (user: Models.User) => {
this.UserList.remove(user);
}
}
}
型號：
module Models{
export class ModelBase{
constructor() {
this.IsNew = ko.observable(false);
}
public IsNew: KnockoutObservable<boolean>;
}
export interface IUser {
FirstName: KnockoutObservable<string>;
LastName: KnockoutObservable<string>;
Age: KnockoutObservable<Age>;
}
export class User extends Models.ModelBase implements IUser {
constructor() {
super();
this.FirstName = ko.observable("");
this.LastName = ko.observable("");
this.Age = ko.observable(new Age());
}
public FirstName: KnockoutObservable<string>;
public LastName: KnockoutObservable<string>;
public Age: KnockoutObservable<Age>;
}
export class Age {
constructor() {
this.ID = ko.observable(null);
this.Description = ko.observable("");
}
public ID: KnockoutObservable<number>;
public Description: KnockoutObservable<string>;
}
}
查看：
<table>
<thead>
<tr><th>Prénom</th><th>Nom de famille</th><th>Age</th></tr>
</thead>
<tbody data-bind="foreach: UserList">
<tr data-bind="ifnot:$data.IsNew">
<td data-bind="text: FirstName"></td>
<td data-bind="text: LastName"></td>
<td data-bind="text: Age().Description"></td>
</tr>
<tr data-bind="if:$data.IsNew">
<td><input type="text" data-bind="value: FirstName" /></td>
<td><input type="text" data-bind="value: LastName" /></td>
<td><input type="text" data-bind="value: Age().Description" /></td>
<td><a data-bind="click:$root.AcceptItem">OK</a><a data-bind="click:$root.RemoveItem">Annuler</a></td>
</tr>
</tbody>
</table>
<a id="AddGuest" data-bind="click:AddItem">Add</a>
@section scripts{
<script src="~/Scripts/models/ModelBase.js"></script>
<script src="~/Scripts/models/User.js"></script>
<script src="~/Scripts/viewmodels/UserViewModel.js"></script>
<script>
var vm = new ViewModels.UserViewModel();
vm.Fill();
ko.applyBindings(vm);
</script>
}
謝謝你！你是對的，在打字稿和淘汰賽中有一些我不明白的概念。問題不是這個，而是更多的東西。我添加了新的工作代碼，以幫助新用戶。 – Hemadeus
沒問題 - 樂於幫忙！ –