Ответы пользователя по тегу Backbone.js
  • Как лучше организовать динамическое обновление блоков HTML на JS?

    mudrick
    @mudrick
    Máximo progreso hemos alcanzado en minimo seso.
    Только лишь для одного виджета корзины Ангулар подключать конечно же не стоит :)

    На Ангуларе это делается следующим образом — есть директива корзины (виджет) и есть сервис корзины. Добавление товаров в корзину идет через сервис, а директива слушает изменения сервиса и выводит у себя обновленную инфу.

    Вот Директива:
    angular.module('app').directive('shoppingCartWidget', function(shoppingCartService) {
        return {
            restrict: 'E',
            replace: true,
            scope: {},
            templateUrl: 'shopping-cart.html',
            link: function(scope, element, attributes) {
                scope.items = [];
    
                // слушаем изменения в корзине
                scope.$watch(shoppingCartService.getItems, function(items) {
                    scope.items = items;
                });
            }
        }
    });


    Вот сервис:
    angular.module('app').directive('shoppingCartService', function(_) {
        var items = [];
    
        function add(itemData) {
            items.push(itemData);
        }
    
        function remove(itemID) {
            items = _.reject(items, {id: itemID});
        }
    
        function clear() {
            items = [];
        }
    
        function getItems() {
            return items;
        }
    
        return {
            add: add,
            remove: remove,
            clear: clear,
            getItems: getItems
        }
    });


    Вот контроллер:
    angular.module('app').controller('myController', function(shoppingCartService) {
    
        // ну, тут будет не массив, а $resource, например
    
        $scope.items = [
            {
                id: 1,
                name: 'Клавиатура',
                price: 150
            },
            {
                id: 2,
                name: 'Кофе',
                price: 50
            }
        ];
    
        $scope.addToCart = addToCart;
    
        function addToCart(itemData) {
            shoppingCartService.add(itemData);
        }
    
    });


    Вот вьюха списка товаров:
    <ul>
        <li ng-repeat="item in items">
            <span>{{item.name}}</span>
            <button ng-click="addToCart(item)">Добавить в корзину</button>
        </li>
    </ul>
    Ответ написан
    5 комментариев