Question

好的，首先，我是Backbone.js用法的新手，我在网上找到的文档和示例的帮助下玩它。我已设法在上面node.js配置它并且问题困扰我现在我认为纯粹缺乏我的Backbone知识，解决方案是我希望非常简单。我已将Backbone分成若干文件，并在Require.js的帮助下完成所有工作：

RecipeSearch.js
router.js
models(folder) ¬
               recipe_collection_m.js
               recipe_m.js
views(folder) ¬
               search_v.js
templates(folder) ¬
                   search_t.html

RecipeSearch.js简单地解雇了所有内容：

define(["router"],function(router) {
    var initialize = function(hash) {
        if(!hash){
            window.location.hash = 'search';
        }else{
            window.location.hash = hash;
        }
        Backbone.history.start();
    };

    return {
        initialize: initialize
    };
});

router.js是我处理路线的地方：

define(["views/search_v","models/recipe_collection_m"]
    ,function(searchView, recipeCollection){

    var RecipeSearchSpace = Backbone.Router.extend({
        currentView: null,

        routes: {
            "search":              "search",    // #search
            "search/:query":        "search"  // #search/kiwis
        },

        changeView: function(view) {
            this.currentView = view;
            this.currentView.render();
        },

        search: function(query) {
            if(query){
                var RecipeCollection = new recipeCollection();
                RecipeCollection.url = '/search/'+query;

                RecipeCollection.fetch({
                    success: function(response,xhr) {
                        console.log("Inside success:");
                        console.log(response);
                    },
                    error: function (errorResponse) {
                        console.log("Inside error:");
                        console.log(errorResponse);
                    }
                 });
                this.changeView(new searchView({
                    collection: RecipeCollection
                }));

            }
            else{
                this.changeView(new searchView());
            }

        }


    });


    return new RecipeSearchSpace();

});

模型文件夹中的

位于模型和集合中，

recipe_collection_m.js：

define(['models/recipe_m'], function(Search) {
    var searchCollection = Backbone.Collection.extend({


        model: Search


    });

    return searchCollection;
});

recipe_m.js：

define(function(require) {
    var Search = Backbone.Model.extend({

        defaults:{
            recipe:"no results"
        }

    });
    return Search;
});

最后查看名为recipe_v.js：

define(['text!templates/search_t.html','models/recipe_collection_m'],
    function(SearchTemplate, RecipeCollection){
    var searchView = Backbone.View.extend({

        el:$(".content"),

        events:{
            'click button#search':'send_query'
        },

        initialize: function(){
            _.bindAll(this, 'render','send_query');

            this.collection = new RecipeCollection();


            this.render();

        },

        render: function(){
            this.$el.html(SearchTemplate);
            $('.search_form').append("<button id='search'>Find</button>");
            $(this.el).append("<ul class='recipes_list'></ul>");
        },

        send_query:function(){
            $(".search_form").submit(function(e){
                e.preventDefault();
            });
            var value = $(".wanted").val();
            window.location.hash = '#search/'+ value;
        }


    });

    return searchView;
});

最后是search_t.html，模板：

<p class="text">test search</p>

<form class="search_form">
    <input class="wanted" type="text"/>
</form>

我的问题是我不知道如何正确呈现从服务器到search_v.js（SearchTemplate）的响应。情况如下：

当我点击测试服务器的根目录

时

应用程序将我重定向到/ #search标签，
- 在那里，SearchTemplate会成功呈现已生成的button Find和名为<ul>的{{1}}列表，您可以在视图中看到。
- 我在recipes_list输入中插入值（我想输入＆＃34; 示例＆＃34;）并点击按钮.wanted，{{1功能成功激活
- 浏览器中的网址已成功更改为localhost：3000 / #search / #search
- 我在send_query中example点击了Developer tools标签，并且成功收到了名为Chrome的服务器响应
- 当我检查Network时，我得到了：内部成功： s {length：6，models：Array [6]，_ byId：Object，url：＆＃34; / search / Example＆＃34;，constructor：function ...}
- 我想这意味着它正确地获取到Console

这是我死了，现在我想把它呈现给example，我试图通过以下方式将收集品发送给它：

RecipeCollection

而且我不太确定我在那里收到了这个集合，如果它像这样发送查看，如何在那里调用，例如将其呈现给SearchView？

Answer 1

试试这个：

    search: function (query) {
    var self = this;
    if (query) {
        var RecipeCollection = new recipeCollection();
        RecipeCollection.url = '/search/' + query;
        RecipeCollection.fetch({
            success: function (response, xhr) {
                console.log("Inside success:");
                console.log(response);
                self.changeView(new searchView({
                    collection: response
                }))
            },
            error: function (errorResponse) {
                console.log("Inside error:");
                console.log(errorResponse);
            }
        });
    }
    else {
        this.changeView(new searchView());
    }
}

Backbone.js从响应中呈现数据

1 个答案: