Question

我从JA格式的WebApi获取数据，然后使用KnockoutJS的.push()方法将接收的数据添加到MVC View。我在POST响应中收到的JSON数据是正确的，所以我认为客户端出了问题 - 而不是数据undefined和[Object]。虽然页面刷新后所有数据都正确显示。这是我的淘汰代码：

<script>
    var viewModel = {
        prepp: ko.observableArray(),
        currentPage: ko.observable(-1)
    };
    $(function () {
        getData(viewModel.currentPage() + 1);
        ko.applyBindings(viewModel, document.getElementById("prepps"));      
        });
        //This function used for paging, not concern to question directly
        function getData(pageNumber) {
            if (viewModel.currentPage() != pageNumber) {
                $.ajax({
                    url: "/api/index",
                    type: "get",
                    contentType: "application/json",
                    data: { id: pageNumber }
                }).done(function (data) {
                    if (data.length > 0) {
                        viewModel.currentPage(viewModel.currentPage() + 1);
                        for (var i = 0; i < data.length; i++) {
                            viewModel.prepp.push(data[i]);
                        }
                    }
                });
            };
            //Here we call POST action of WebApi.
            $(".send-feed").click(function () {
                var guid = getguid();
                var styles;
                var req = { RequestName: $("#request").val(), RequestDescription: $("#request-review").val(), RequestOwner: $("#username").val(), RequestGuid: guid, RequestStyles: [] }
                $("div.click").each(function () {
                    styles = { RequestGuid: guid, StyleId: $(this).text() };
                    req.RequestStyles.push(styles);
                });
                var model = JSON.stringify(req);
                $.ajax({
                    url: "/api/index",
                    type: "POST",
                    contentType: "application/json, charset: utf-8",
                    data: model
                }).done(function (data) {
                    viewModel.prepp.push(data);
                });

            });
        }
    });
</script>

这是MVC View标记：

div class="prepp-blocks-container" data-bind="foreach: prepp" id="prepps">
    <div class="prepp-block">
        <div class="star" data-bind="if: $data.IsStylistOffer == true">
            <img src="../../img/star-yellow.png" alt="added by stylist">
        </div>
        <a data-bind="attr: {href: 'Request/' + $data.RequestGuid}"><h3 data-bind="text: $data.RequestName"></h3></a>
        <span  data-bind="foreach: {data: RequestStyles, as: 'style'}">
            <div data-bind="text: style" class="taste-prepp"></div>
        </span>
        <p class="text-small-grey" data-bind="text: $data.PreppsNumber + ' prepps'"></p>
    </div>
</div>

Answer 1

我认为应该调整控制器的返回类型，使其与视图模型结构匹配，如

public model Get() 
{ 
//build your list .
return model ; 
}

尝试使用ko.mapping.toJS()，这样就不会失去淘汰优势。

参考淘宝文档，您可以找到更多相关信息，以便我们更好地使用它Here

Knockout.js使用push方法添加数据而不更新视图

1 个答案: