.ajax() 호출에서 knout.jsobservableArray() 로드

.ajax() 호출에서 knout.jsobservableArray() 로드

이것은 나를 어리둥절하게 합니다.내가 보지 못하는 작은 것임에 틀림없습니다.저는 아주 간단한 짐을 싣으려고 합니다.observableArray아약스 콜로 녹아웃 상태에서

자바스크립트

// we bind the array to the view model property with an empty array.
var data = [];   
var viewModel = {
    vendors: ko.observableArray(data)
};
ko.applyBindings(viewModel);

$(function () {
    // on this click event, we popular the observable array
    $('#load').click(function () {
        // WORKS. Html is updated appropriately.
        viewModel.vendors([{ "Id": "01" },{ "Id": "02" },{ "Id": "03" }]);

        // DOES NOT WORK. Fiddler2 shows the same exact json string come back 
        // as in the example above, and the success function is being called.
        $.ajax({
            url: '/vendors/10',
            dataType: 'json',
            success: function (data) {
                viewModel.vendors(data);
            }
        });
    });
});

html

<button id="load">Load</button>
<ul data-bind="template: { foreach: vendors }">
    <li><span data-bind="text: Id"></span></li>
</ul>

---

질문:왜 성공적인 아약스가 전화를 하는 거지?data변수 값이 html 새로 고침을 트리거하지 않고 하드 타이핑된 값과 바이트 단위로 일치합니다.

이것이 잘 작동하지 않을 이유는 없습니다.이를 통해 알 수 있듯이.

http://jsfiddle.net/madcapnmckay/EYueU/

저는 ajax post가 json 데이터를 실제로 반환하고 있고 json이 배열이고 정확하게 파싱되고 있는지 확인하겠습니다.

아약스 호출을 조정해서 피들 아약스 핸들러가 제대로 작동하도록 해야 했습니다.

더 이상 생각나는 게 없습니다.

도움이 되길 바랍니다.

var self=this;
//var self first line in model

$.ajax({
            url: ",
            dataType: "json",
            contentType: 'application/json',
            type: "POST",
            data: JSON.stringify({ }),
            processdata: true,

            beforeSend: function () {
                $.mobile.loading('show');
            },

            error: function (xhr, textStatus, errorThrown) {
                alert('Sorry!');
            },

            success: function (data) {

                $.mobile.loading('hide');
                if (data.result!= '') {
                    self.vendors(data.result);



                } else {
                    self.vendors({something});

                }
            }
        });

이 뷰Model.venders가 아닌 self.venders를 사용합니다.

여기 내 MVC .net 앱에서 녹아웃과 jquery로 한 일이 있습니다.

// Scripts/groItems.js
(function () {

    var ViewModel = function () {
        items = ko.observableArray(),
            ItemName = ko.observable(),
            Img = ko.observable(),
            Qty = ko.observable()
    }

    $.getJSON('/Items2/AllItems', function (data) {
        for (var i = 0; i < data.length; i++) {
            self.items.push(data[i]);
        }
    });

    var vm = new ViewModel();

    $(function () {
        ko.applyBindings(vm);
    });

}());

@model IEnumerable<GroModel.Item>
@{
    ViewBag.Title = "Index";
}

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<div data-bind="text: items().length"></div>
<table class="container table table-hover">
    <thead>
        <tr>
            <th>Item name</th>
            <th>img</th>
            <th>qty</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: items">
        <tr>
            <td data-bind="text: ItemName"></td>
            <td data-bind="text: Img"></td>
            <td data-bind="text: Qty"></td>
        </tr>
    </tbody>
</table>

@section Scripts {
    <script src="~/Scripts/knockout-3.4.2.js"></script>
    <script src="~/Scripts/groItems.js"></script>
}

다음은 Items2Controller.cs 에 있는 제 코드의 일부입니다.

    private GroContext db = new GroContext();
    public JsonResult AllItems()
    {
        return Json(db.Items.ToList(), JsonRequestBehavior.AllowGet);
    }

이것이 도움이 되길 바랍니다.감사해요.

우리는 간단한 자바스크립트 유틸리티 기능을 해결책으로 사용할 수 있습니다.

대신에viewModel.vendors(data);, 평가(평가의 위험성을 먼저 조사)로 포장하는 것이 효과가 있을 것입니다.

eval("viewModel.vendors("+JSON.stringify(data)+");");

이 버그는 우리가 포장지 클래스와 함께 사용할 때 녹아웃의 샘플이 작동하는 것 같습니다.

public class ResultWrapper
{
    public Title {get;set;}
    public List<Result> {get;set;}
}

http://learn.knockoutjs.com/ #/? tutorial= 웹 메일

하지만 결과를 직접 반환하면 바인딩할 방법이 없습니다. (추가로 바인딩을 적용하지 않고!)

언급URL : https://stackoverflow.com/questions/9730496/loading-a-knockout-js-observablearray-from-ajax-call