javascript - Backbone.js 从响应中渲染数据

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的 View :

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>叫recipes_list正如您在 View 中看到的那样。
  • 我在 .wanted 中插入值(假设我输入了“示例”)输入并点击按钮#search ，send_query函数成功触发
  • 浏览器中的 url 更改为 localhost:3000/#search/example成功
  • 我开火 Developer tools在Chrome检查Network选项卡，并且有名为 Example 的服务器响应接收成功
  • 当我检查Console时我有: 内部成功: s {长度:6，模型:Array[6]，_byId:对象，url:“/search/example”，构造函数:函数…}
  • 我猜这意味着它正确地获取到 RecipeCollection

这是我的死者，现在我想将其呈现给 SearchView ，我尝试通过以下方式将集合发送给它:

this.changeView(new searchView({
                collection: RecipeCollection
            }));

我不太确定我在那里得到了这个集合，如果它像这样发送来查看，如何调用那里，例如将其渲染到 <ul> ？

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());
    }
}