Las solicitudes de Ajax no se realizan en la carga de la página cuando se usa KnockoutJS

Soy nuevo en toda la escena de secuencias de comandos de clientes front-end y he encontrado algunas dificultades al trabajar en mi proyecto más reciente. He buscado en el sitio web y no pude encontrar nada que respondiera a mi pregunta. Puede haber algo aquí y simplemente no lo he encontrado debido a mi inexperiencia y, si lo hay, sería bueno si pudiera proporcionar un enlace a esos recursos.

Actualmente estoy trabajando en la creación de un cliente que realiza llamadas ajax a una API web asp.net de dominio cruzado que he creado. Sé que la API web funciona como se probó en Fiddler. También he logrado hacer llamadas con éxito en un evento de clic.

El problema es que parece que no puedo hacer que esto funcione en la carga de la página y con knockoutjs. He intentado hacer una lista simple que se completa con datos cuando se carga la página, pero cuando cargo la página y verifico el violín puedo ver que las llamadas ajax no se están realizando. Esto posiblemente explique por qué cuando cargo la página, el contenido no está allí. Intenté insertar algunos datos estáticos para ver el modelo y el enlace funcionó, por lo que parece que puede haber algo que bloquee las llamadas ajax.

He mirado ejemplos y he creado algo de código. No puedo ver ningún problema con el código, pero como no tengo experiencia, existe la posibilidad de que me esté perdiendo algo. También puede haber formas más eficientes de vincular modelos, si es así, agradecería cualquier consejo de alguien con más experiencia.

El código es:

@{
ViewBag.Title = "KnockoutTesting";
}


<!-- MAIN -->
    <div id="main">
        <!-- wrapper-main -->
        <div class="wrapper">
            <ul data-bind="foreach: places">
                <li>
                    <span data-bind="text: title"></span>
                </li>
            </ul>
        </div>
    </div>

@section scripts {
<script type="text/javascript" src="../../Scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../../Scripts/knockout-2.1.0.js"></script>

<script type="text/javascript">

    function PlacesViewModel() {
        var self = this;

        function Place(root, id, title, description, url, pub) {
            var self = this;

            self.id = id;
            self.title = ko.observable(title);
            self.description = ko.observable(description);
            self.url = ko.observable(url);
            self.pub = ko.observable(pub);

            self.remove = function () {
                root.sendDelete(self);
            };

            self.update = function (title, description, url, pub) {
                self.title(title);
                self.description(description);
                self.url(url);
                self.pub(pub);
            };

        };

        self.places = ko.observableArray();

        self.add = function (id, title, description, url, pub) {
            self.places.push(new Place(self, id, title, description, url, pub));
        };

        self.remove = function (id) {
            self.places.remove(function (place) { return place.id === id; });
        };

        self.update = function (id, title, description, url, pub) {
            var oldItem = ko.utils.arrayFirst(self.places(), function (i) { return i.id === id; });
            if (oldItem) {
                oldItem.update(title, description, url, pub);
            }
        };



        self.sendDelete = function (place) {
            $.ajax({
                url: "http://localhost:1357/api/places" + place.id,
                type: "DELETE"
            });
        }
    };

    $(function () {
        var viewModel = new PlacesViewModel();

        ko.applyBindings(viewModel);
        $JQuery.support.cors = true;
        $.get("http://localhost:1357/api/places", function (places) {
            $.each(places, function (idx, place) {
                viewModel.add(place.PlaceID, place.Title, place.Description, place.URL, place.Public);
            });
        }, "json");
    });

</script>
}

Se ha simplificado para que funcione antes de agregar más funciones.

Gracias por su tiempo.

preguntado el 31 de julio de 12 a las 14:07

1 Respuestas

Creo que su problema puede estar en la implementación de su API web. Tanto el cliente como el servidor deben ser compatibles con CORS. Según Carlos post, la API web no admite CORS de forma nativa. Su publicación incluye una muestra de código.

Respondido 01 ago 12, 04:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.