将"dict"对象从 Django 模板传递到 Angular ControlleR语言 避免 jsonify 和解析

Question

我试图从我的django模板中调用一个angular控制器函数，并传递我要迭代的对象，但它要求我在传递之前先将对象转换为json，然后在控制器中，我必须再次解析json到对象。

下面是代码片段:

Django TemplateView:

class Menu(TemplateView):
    template_name = 'menu.html'
    def get_context_data(self, **kwargs):
        context = super(Menu, self).get_context_data(**kwargs)
        # Using the DRF API to fetch the data for template view
        menus = requests.get('http://127.0.0.1:8000/api/v1/menus/').json()
        context['menu'] = menus
        return context

menu.html:

<div class="row" ng-controller="MenuController as vm">
    <ul>
        {% for menu_item in menu.menu_items %}
            <li class="col-xs-12 col-sm-6 col-md-4">
                <!-- menu_item is dict type object -->
                <button class="btnRed txtUpper" 
                    ng-click="vm.addToCart('{{ menu_item|to_json|escapejs }}')">
                    Add to cart
                </button>
            </li>
         {% endfor %}
    </ul>
</div>

to_json是我的自定义过滤器:

@register.filter
def to_json(value):
    return json.dumps(value)

现在，在我的控制器中，要使用传入的对象，我需要再次将json解析为object:

angular.module('menu', [])
.controller('MenuController', ['$log', function($log) {
    this.addToCart = function(menuItem) {
        menuItem = JSON.parse(menuItem);
        $log.debug('Adding MenuItem to Cart: ' + menuItem);
        $log.debug('Adding MenuItem to Cart: ' + menuItem['id']);
    };
}]);

我要做很多事情。这一次还行，但如果我必须对每个模板和角积分都这样做，那就太过分了。有什么优雅的方法可以避免这种情况吗?

Answer 1

你似乎对JS前端和REST后端应该如何工作很困惑。这里不需要TemplateView。你的JS应该直接向DRF端点发出请求，后者将直接返回JSON。