Question

我正在使用knockout js导航到另一个视图。我有一个列表视图，显示从数据库到表的所有项目。每行都有“编辑”按钮，该按钮应将用户转发到“编辑”视图，但是当我单击它时，它不会显示记录的属性。

这是我的列表视图：

<div>
    <span data-bind="text: catSearch"></span><br />
    <table class="table">
        <tr>
            <td><b>Name:</b></td>
            <td><input type="text" class="input-sm" id="txtName" data-bind="value: nameSearch"/></td>
            <td><b>Category:</b></td>
            <td><input type="text" class="input-sm" id="txtcategory" data-bind="value: catSearch" /></td>

        </tr>
        <tr>
            <td><button type="button" class="btn btn-primary" data-bind="click: filterList">Search</button></td>
        </tr>
    </table>
</div>
<br />
<table class="table ">
    <thead>
    <tr>
        @*<th>Id</th>*@
        <th class="navbar-header">Product</th>
        <th>Category</th>
        <th>Price</th>

        <th></th>
    </tr>
    </thead>
    <tbody data-bind="foreach: Products">
        <tr>
            @*<td data-bind="text: Id"></td>*@
            <td data-bind="text: Name"></td>
            <td data-bind="text: Category"></td>
            <td data-bind="text: Price"></td>

            <td>
                <a class="btn btn-default" data-bind="click: editProduct">Edit</a>
                <a class="btn btn-danger" data-bind="click: deleteProduct">Delete</a>
            </td>
        </tr>
    </tbody>
</table>

</div>

@section Scripts {
    @Scripts.Render("~/bundles/knockout")
    @Scripts.Render("~/Scripts/jquery-3.1.1.min.js")
    @Scripts.Render("~/Scripts/knockout-3.4.2.js")
    @Scripts.Render("~/Scripts/ViewModels/ProductListVm.js")
}

这是我获得名单的淘汰赛：

var urlPath = window.location.pathname;
$(function () {
    ko.applyBindings(ProductListVm);
    ProductListVm.filterList();
});

//View Model
var ProductListVm = {
    Products: ko.observableArray([]),

    Id: ko.observable(0),
    Name: ko.observable(""),
    Category: ko.observable(""),
    Price: ko.observable(0),
    StatId: ko.observable(0),
    nameSearch: ko.observable(""),
    catSearch: ko.observable(""),
    getPass: ko.observable(),
    Sess: ko.observable(""),



    filterList: function () {
        var self = this;
        var nameP = self.nameSearch();
        var catP = self.catSearch();


        $.ajax({
            type: "POST",
            url: "/Product/Retrieve",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "{\"nameSearch\" : \"" + nameP + "\" , \"catSearch\" : \"" + catP + "\" }",
            success: function (data) {
                self.Products(data);
            }
        });
    }

};
//FORWARDING TO EDIT VIEW
self.editProduct = function (product) {
    window.location.href = '/Product/Edit/' + product.Id;
};
self.deleteProduct = function (product) {
    window.location.href = '/Product/Delete/' + product.Id;
};

//honestly, i dont know what is the use of this. it doesnt seem to have anything to do during runtime
function Products(data) {
    this.Id = ko.observable(data.Id);
    this.Name = ko.observable(data.Name);
    this.Category = ko.observable(data.Category);
    this.Price = ko.observable(data.Price);
    this.StatId = ko.observable(data.StatId);
}

当我点击“编辑”按钮后检查页面时，这就是它所说的内容：

Uncaught ReferenceError: Unable to process binding "value: function (){return Id }"
Message: Id is not defined
    at value (eval at parseBindingsString (knockout-3.4.2.js:68), <anonymous>:3:58)

Answer 1

您必须在ajax成功通话中创建一个新的产品实例。

$.ajax({
type: "POST",
url: "/Product/Retrieve",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "{\"nameSearch\" : \"" + nameP + "\" , \"catSearch\" : \"" + catP + "\" }",
success: function(data) {
    var tempProducts = [];
    for (var i = 0; i < data.length; i++) {
        var productVM = new Products(data[i])
        tempProducts.push(data);
    }
    self.Products.push.apply(Products, tempProducts)
}});

如果您不创建新的产品实例。在您的视图中，foreach绑定将找不到ProductsViewModel的任何属性

使用knockoutjs

1 个答案: