web-dev-qa-db-fra.com

chargement d'un observableArray () à partir de l'appel .ajax ()

Cela m'énerve. Ce doit être quelque chose de petit que je ne vois pas. J'essaie de charger une observableArray très simple dans KO avec un appel ajax.

javascript 

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

Question: Pourquoi l'appel avec succès ajax, qui est la valeur de la variable data, correspond-t-il à la valeur en dur, octet pour octet, sans déclencher l'actualisation html?

javascriptjsonajaxknockout.js
19
one.beat.consumer

Il n'y a aucune raison pour que cela ne fonctionne pas bien. Comme cela démontre.

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

Je voudrais vérifier que la publication ajax renvoie effectivement des données JSON et que ce JSON est un tableau et qu'il est correctement analysé.

Je devais modifier l’appel ajax pour que les gestionnaires de violon ajax fonctionnent correctement.

Rien de plus que je peux penser.

J'espère que cela t'aides.

11
madcapnmckay
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});

                }
            }
        });

Utilisez self.vendors pas this viewModel.vendors

0
Stipe

Voici ce que j'ai fait dans mon application MVC .net avec knock-out et 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>
}

Ce qui suit fait partie de mon code sur le Items2Controller.cs

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

 enter image description here

J'espère que cela aidera. Merci

0
user2662006