var personViewModel = {
firstName: ko.observable("Masoud"),
lastName: ko.observable("Pakdel")
this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();
}, this);
};<span data-bind='text: fullName'></span>
function Product(name, price) {
this.name = ko.observable(name);
this.price = ko.observable(price);
}this.shoppingCart = ko.observableArray([
new Product("Beer", 10.99),
new Product("Brats", 7.99),
new Product("Buns", 1.49)
]);<table>
<thead><tr>
<th>Product</th>
<th>Price</th>
</tr></thead>
<tbody data-bind='foreach: shoppingCart'>
<tr>
<td data-bind='text: name'></td>
<td data-bind='text: price'></td>
</tr>
</tbody>
</table><button data-bind='click: addProduct'>Add Beer</button>
this.addProduct = function() {
this.shoppingCart.push(new Product("More Beer", 10.99));
};function PersonViewModel()
{
this.firstName = ko.observable("John");
this.lastName = ko.observable("Smith");
this.checkout = function () {
alert("Trying to checkout");
};
this.fullName = ko.computed(function(){
return this.firstName() + " " + this.lastName();
}, this);
this.shoppingCart = ko.observableArray([
new Product("Beer", 10.99),
new Product("Brats", 7.99),
new Product("Buns", 1.49)
]);
this.addProduct = function () {
this.shoppingCart.push(new Product("More beer", 10.99));
};
};this.removeProduct = function(product) {
self.shoppingCart.remove(product);
}; function PersonViewModel() {
var self = this;<tr> <td data-bind='text: name'></td> <td data-bind='text: price'></td> <td><button data-bind='click: $root.removeProduct'>Remove</button></td> </tr>
<li>Item 1</li> <li>Item 2</li>
<li>Item 1</li> <li>Item 2</li> <li>Item 3</li>
<li>Item 0</li> // <= New item <li>Item 1</li> <li>Item 2</li> <li>Item 3</li>
<li key={0}>Item 0</li> // <= New item
<li key={1}>Item 1</li>
<li key={2}>Item 2</li>
<li key={3}>Item 3</li> @page "/"
<button class="btn btn-primary" @onclick="addPerson">Add Person</button>
<ul class="mt-5">
@foreach (var person in People)
{
<li>@person.Id, @person.Name</li>
}
</ul>
@code{
List<Person> People = new()
{
new() { Id = 1, Name = "User 1" },
new() { Id = 2, Name = "User 2" },
};
int LastId = 2;
void addPerson()
{
People.Insert(0, new() { Id = ++LastId, Name = $"User {LastId}" });
}
class Person
{
public int Id { set; get; }
public string Name { set; get; }
}
} 
<ul class="mt-5">
@foreach (var person in People)
{
<li @key="person.Id">@person.Id, @person.Name</li>
}
</ul> 
app.MapGet("/debug/routes", (IEnumerable<EndpointDataSource> endpointSources) =>
string.Join("\n", endpointSources.SelectMany(source => source.Endpoints)));