Как обновить данные, используемые объектом kendo.observable, используя ajax?Кендо UI - PullRequest
Новая
       7

Как обновить данные, используемые объектом kendo.observable, используя ajax?Кендо UI

0 голосов
/ 28 мая 2018

Возможно ли повлиять на асинхронность данных (ajax), которая используется объектом kendo.observable в пользовательском интерфейсе Kendo?

С кодом ниже cart.add() функция запускается и переменная cart.contents обновляется, но этоНе влияет на шаблон и не обновляет данные, используемые шаблоном.Я ожидаю, что изменение cart.contents изменяет данные, используемые шаблоном, например text: quantity и text: itemPrice

шаблон скрипта 1: 

<script type="text/x-kendo-template" id="cart-preview-template">
  <div id="shop-info" data-bind="attr: { class: cartContentsClass }">
    <ul data-role="listview" data-bind="source: cart.contents" data-template="cart-item" id="shop-list"></ul>
        <div id="shopping-cart">
            <p class="total-price" data-bind="html: totalPrice"></p>
            <a id="empty-cart" href="#" data-bind="click: emptyCart">empty cart</a>
        </div>
    </div>
</script>

шаблон скрипта 2: 

<script type="text/x-kendo-template" id="cart-item">
    <li class="selected-products-list">
        <a data-bind="click: removeFromCart" class="view-selected-items">
            <img data-bind="attr: { src: imageSource, alt: imageAlt }"
            />
        </a>
            <span data-bind="text: quantity"></span>
            <span data-bind="text: itemPrice"></span>
        </span>
    </li>
</script>

модель: 

var cartPreviewModel = kendo.observable({
                cart: cart,

                cartContentsClass: function () {
                    return this.cart.contentsCount() > 0 ? "active" : "empty";
                },

                removeFromCart: function (e) {
                    this.get("cart").remove(e.data);
                },

                emptyCart: function () {
                    cart.empty();
                },

                itemPrice: function (cartItem) {
                    return kendo.format("{0:c}", cartItem.item.unitPrice);
                },

                imageSource: function (cartItem) {
                    var baseUrl = "{{ absolute_url(asset('images/products/')) }}";
                    return baseUrl + cartItem.item.image;
                },

                imageAlt: function () {
                    return "Product image";
                },

                totalPrice: function () {
                    return this.get("cart").total();
                },

                proceed: function (e) {
                    this.get("cart").clear();
                    sushi.navigate("/");
                }
            });

объект наблюдаемой корзины используется: 

        var cart = kendo.observable({
            //for testing purpose, just to show cart panel bar at start with some items. 
            //originally it should be: contents: []
            contents: [{"item":"productID":1,"unitPrice":"111.00","image":"5.jpg"},"quantity":1}],
            add: function (item) {
                $.ajax({
                    type: 'POST',
                    url: '{{ path('add_product') }}',
                    dataType: 'json',
                    data: {'item': JSON.stringify(item)},
                    success: function (sessionCart) {
                        // original code: 
                        // this.contents = sessionCart;

                        // code for testing, just to be sure new data is set:
                        this.contents = [{"item":{"productID":1,"unitPrice":"111.00","image":"5.jpg"},"quantity":1},{"item":{"productID":2,"unitPrice":"999.00","image":"8.jpg"},"quantity":1}];
                    },
                });

            },

модель и шаблон привязки: 

kendo.bind($("#shop-info"), cartPreviewModel);

Еще раз, с вышеФункция code cart.add() запущена и переменная cart.contents обновлена ​​(при отладке), но это не влияет на шаблон и не обновляет данные, используемые шаблоном.

1 Ответ

0 голосов
/ 29 мая 2018

Вы должны использовать функцию set() для изменения значений свойств в наблюдаемой, чтобы инициировать обновление любых привязок.

Поэтому измените это: 

this.contents = [
  {"item":{"productID":1,"unitPrice":"111.00","image":"5.jpg"},"quantity":1},
  {"item":{"productID":2,"unitPrice":"999.00","image":"8.jpg"},"quantity":1}
];

на это: 

this.set("contents", [
   {"item":{"productID":1,"unitPrice":"111.00","image":"5.jpg"},"quantity":1},
   {"item":{"productID":2,"unitPrice":"999.00","image":"8.jpg"},"quantity":1}
]);
...