Question

上一个标题： - Backbone.js中的搜索功能。

我正在使用Backbone.js来实现搜索功能（当用户在搜索文本框中键入内容时，列表应根据搜索条件进行归档）。

为此我将控制器设为： -

var departments = backbone.Collection.extend({
    model: departmentModel,
    url: '/MyController/GetDepartments',
    comparator: function (department) {
        return department.get('name');
    },
    initialize: function () {
        this.selected = [];
    },
    search: function (letters) {
        if (letters == "") return this;

        var pattern = new RegExp(letters, "gi");
        return _(this.filter(function (data) { //without wrapping the filter with the underscore function, the filter does not return a collection
            return pattern.test(data.get("Name"));
        }));
    }
});

return departments;

在我的Backbone View中，我在搜索文本框中定义了我的keyup事件

 "keyup #searchDepartments": "searchDepartments",

我的searchDepartments位于 -

searchDepartments: function (e) {
    var letters = $(e.currentTarget).val();
    var searchResult = this.collection.search(letters);
    var collection = new departmentCollection(searchResult.toArray());
    //  debugger;
    this.renderFileteredData(collection);
    //$(e.currentTarget).val(letters);
}

最后，renderFilteredData很简单

renderFileteredData: function (departments) {

     $(this.$el).html(this.template(departments.toJSON()));

     return this;
 },

现在的问题是 - 当我输入任何文本时，列表会被过滤掉，但搜索文本会消失。怎么了？

编辑： - 根据建议，现在我为搜索文本框创建了一个不同的视图： -

function ($, _, backbone) {
    'use strict';
    var searchDepartmentView = backbone.View.extend({
        el: "#search-container",
        tagName: 'div',
        template: Handlebars.templates.DepartmentSearchView,
        initialize: function () {
            //this.render();
            return this;
        },
        render: function () {
            console.log('in search departmnet view render method');
            // $(this.$el).html(this.template());// I am trying to render this template.. But its not working
            this.$el.html('in search departmnet view render method');//Passing dummy value to it
            return this;
        }
    });

    return searchDepartmentView;
});

在我的主视图中： -

render: function () {
    //  _.bindAll(this, "search");
    this.innerView = new departmentSearchView();

    $(this.$el).html(this.template(this.collection.toJSON()));

    this.$el.find("#search-container").html(this.innerView.render().$el); //Tried approach 1 as suggested
    // $(this.$el).html(this.innerView.render().el);//Tried approach 2 as suggested

    return this;
},

现在，我没有在主视图中显示我的搜索文本in search departmnet view render method

Answer 1

最后，我找到了一种方法。感谢Kelvin Peel

中YuruiRayZhang的精彩答案

感谢var ParentView = Backbone.View.extend({ el: "#parent", initialize: function() { // Step 1, (init) I want to know anytime the name changes this.model.bind("change:first_name", this.subRender, this); this.model.bind("change:last_name", this.subRender, this); // Step 2, render my own view this.render(); // Step 3/4, create the children and assign elements this.infoView = new InfoView({el: "#info", model: this.model}); this.phoneListView = new PhoneListView({el: "#phone_numbers", model: this.model}); }, render: function() { // Render my template this.$el.html(this.template()); // Render the name this.subRender(); }, subRender: function() { // Set our name block and only our name block $("#name").html("Person: " + this.model.first_name + " " + this.model.last_name); } });提出的建议！

来自那里的代码片段，描述了嵌套视图的详细过程： -

{{1}}

此外，上述过程how-to-handle-initializing-and-rendering-subviews-in-backbone-js

的扩展教程

显示包含搜索框的子视图的问题 - Backbone.js

1 个答案: