Asp.net 从Web API AJAX结果向Knockout.js数组添加单击绑定

我有一个ASP.NET Web API方法，可返回产品列表：

public async Task<IEnumerable<Product>> Get()
{
    var products = new IEnumerable<Product>();
    // Data populated here
    return products;
}

我想对这些产品应用一个点击绑定，在本例中，这将是一个名为

myClickFunction

的方法如果可能，该方法应该是属于Web API调用返回的对象的函数：

<ul data-bind="foreach: products">
    <li class="item" data-bind="text: productName, click: myClickFunction">
    </li>
</ul>

---

我是否可以在Web API结果中添加一个函数，然后我可以在SavaBabyRay.< /P> < P>中使用，您应该将您的<代码>产品< /Case>项目视为DTO，并在前端代码中使用可以通过DTO的适当的视图模型。例如，让我们假设这个服务器端类（因为您还没有显示自己的类）：

然后您可以拥有如下视图模型：

var ProductVm = function (dto) {
    var self = this;
    self.productName = dto.name;
    self.description = dto.description;
    self.myClickFunction = function() {
        // Your function...
    }
}

并沿着以下路线传递：

function listProducts(viewmodel) {
    var productsQuery = "api/products/get";

    // Send an AJAX request
    $.getJSON(productsQuery).done(function (result) {
        viewmodel.products(result.map(function (dto) { return new ProductVm(dto); }));
    });
}

---

此外，您可能希望通过使用或通过使用

dto

简单地

self

来简化此操作，所以您的意思是所有行只有一个函数myClickFunction，并且单击要为特定行调用myClieckFunction的li时？@Dnyanesh是，我希望在单击每个产品时对其进行操作。我尝试了jQuery绑定，但绑定对动态添加的元素不起作用。您的意思是

myClickFunction

的代码来自服务器（通过Web API调用返回），还是希望在客户端代码中用此函数装饰每个对象？如果这是前者（实际上这不是一个好主意），请看，这是后者-只需在

done（）

回调中使用array

map

函数，并将此回调添加到每个返回的产品中即可。@Ilyluzyanin这是后者。我在考虑前者，但我同意这不是一个好主意。我会试试你的建议，谢谢！这正是我想要实现的。我有一个服务器端模型和一个结构等效的客户端模型。我不熟悉map函数如何允许我从服务器端数据轻松创建客户端对象。谢谢

var ProductVm = function (dto) {
    var self = this;
    self.productName = dto.name;
    self.description = dto.description;
    self.myClickFunction = function() {
        // Your function...
    }
}

function listProducts(viewmodel) {
    var productsQuery = "api/products/get";

    // Send an AJAX request
    $.getJSON(productsQuery).done(function (result) {
        viewmodel.products(result.map(function (dto) { return new ProductVm(dto); }));
    });
}