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

Question

I'm getting data from WebApi on JSON format and then adding received data to MVC View by using .push() method of KnockoutJS. The JSON data I received on POST response is correct, so I believe it's something wrong on client side - instead of data I'm geting undefined and [Object] . Although after page refresh all data showing correctly. Here my knockout code:

<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>

And here is the MVC View markup:

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

I believe your return type from controller should be adjusted so it will match the view model structure like

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

Try to use ko.mapping.toJS() so knockout advantages are not lost .

Refer knockout doc's you can find more relevant info how we can better use it Here