Javascript 以正确的方式使用主干集合在子视图和模板引擎中传递它们

我正在尝试了解如何使用

主干
集合
，并将它们拉入由
子视图创建的相对
模板引擎

这就是我在应用程序中尝试的逻辑：


我的
ajax请求
返回我这个对象：

{
    "products":[
        {
            "id":"43",
            "text":"Sunset Chips",
            "image":"43.png"
        },{
            "id":"107",
            "text":"Pringles Hot & Spicy",
            "image":"107.png"
        }
    ],
    "brands":[
        {
            "id":"132",
            "text":"P&G",
            "image":"132.png"
        },{
            "id":"27",
            "text":"Kinder",
            "image":"27.png"
        }
    ]
}

我使用
jQuery
的
$.ajax
方法获取它，并在我的视图中为我的主干应用程序管理它：

<script type="text/javascript">

var search = {};

search.app = {};
search.app.id = "#search-results";

search.product = {};
search.product.defaults = {
    id:0,
    text:"<?php echo __('No results here');?>",
    image:"<?php echo $this->webroot;?>files/product/default.png",
};

$(function(){

    var SearchApp = new Search.Views.App({
        id:"#search-results"
    });

    var ProductList = new Search.Collections.Products();
    var subView;

    function parseResults (response, search) {

        for (var i = response.products.length - 1; i >= 0; i--) {
            ProductList.add([new Search.Models.Product(response.products[i])]);
        };

        subView = new Search.Views.Product ({
            collection:ProductList,
            id:"#product-results",
            template:"#results-product-template" // solo in this.options.template
        });

        updateResults();
    }

    function updateResults () {
        console.log('updateResults: Ritorno il risultato quando hunter riceve una risposta dal server');
        if ($('#search-results').length == 0) {
            $('div.main > section:first-child').before('<section id="search-results"></section>');
        }
        SearchApp.renderProductCollection(subView);
    }

    $('#search-results .close').on('click', function () {
        $('#search-results').animate({height:0}, 500, function () {
            $(this).remove();   
        })
    });

    var callbacks = {
        on_response:parseResults // function presente in backbone.search.js
    };

    $('#hunter').hunter({url:'<?php echo $this->request->base; ?>/searches/default_search', callback:callbacks, ajax_params:{limit:10, term:'%%'}});

});
</script>

我的问题是，当我试图解析
Handlesbar
模板中的数据时，因为我已经解析了
子视图集合中的数据，所以我有一个
数组
结构如下：

[
    {
        "id":"43",
        "text":"Sunset Chips",
        "image":"43.png"
    },{
        "id":"107",
        "text":"Pringles Hot & Spicy",
        "image":"107.png"
    }
]

有了这些数据，由于视图中的
parseResults
，我不再有
products
对象，在视图中我将ajax放在集合中

如果没有
products
prop name，如何解析
products
数组，或者如何以正确的方式保存数据

我知道在我的应用程序中，我可以这样做来解决问题：

var container = new array();
container['products'] = this.collection.toJSON();
data = container;

var template = Handlebars.compile($(this.options.template).html());
return '<ul id="product-results" class="w-1-4">' + template(data) + '</ul>';

var容器=新数组（）；
容器['products']=this.collection.toJSON（）；
数据=容器；
var template=handlebar.compile（$（this.options.template.html（））；
返回“
”+模板（数据）+”
”；

但是这是正确的方法还是我遗漏了什么？
如果您使用主干网，则不需要使用$.ajax

使用collection.fetch

此外，服务器似乎没有按照您的需要提供答案，因此主干网有自己的解析：

我也是无逻辑模板的粉丝。因此，通过集合的迭代必须在视图中，而不是在模板中。也请检查此项（特别是第二点）：

以正确的方式使用集合，然后在视图中呈现它，您可以侦听添加或重置事件并以这种方式填充集合。
this.collection.on（'add'，this.render））//一个模型接一个模型
this.collection.on（'reset'，this.render））//获取所有模型（您需要在fetch调用中指定一个参数{reset:true}
谢谢您的回答，我会看一看！没问题，这个问题涉及太多的主题，如果重新考虑您将要执行的代码，您将获得新的问题（按区域指定，如fetch或render等），请创建它，我们将帮助您。
[
    {
        "id":"43",
        "text":"Sunset Chips",
        "image":"43.png"
    },{
        "id":"107",
        "text":"Pringles Hot & Spicy",
        "image":"107.png"
    }
]

var container = new array();
container['products'] = this.collection.toJSON();
data = container;

var template = Handlebars.compile($(this.options.template).html());
return '<ul id="product-results" class="w-1-4">' + template(data) + '</ul>';