Question

我对Backbone.js很赞，但我喜欢jQuery。不过我喜欢Backbone如何将代码组织成模型，视图和集合，但我仍然无法理解在编写JS代码时如何使用它。

例如，使用我在jQuery中编写的这个简单代码，当用户在输入框中键入时，该代码会附加一个建议框：

// this is the model
var questions = [
    {question: "what is your name"},
    {question: "How old are you"},
    {question: "what is your mothers name"},
    {question: "where do work/or study"}
];

// search data function
function searchData(datas,term){
    return _.filter(datas, function(obj) {
        return ~obj.question.toLowerCase().indexOf(term);
    });
}

// Events
$("#suggestinput").on({
    keyup: function(){
        var results = searchData(questions, this.value);
        $("#suggestions")
            .addClass("active")
            .html(_.reduce(results, function(last, q){
                return last + "<p>" + q.question + "</p>";
             }, ""));
    },
    blur: function () {
        $("#suggestions").removeClass('active');
        $("#suggestions").html(" ");
    },
    focus: function () {
        if ( $(this).val() === "" ) {
            $("#suggestions").addClass('active');
            $("#suggestions").html("<p> start typing a question </p>");
        }
    }
});

使用Backbone.js结构构建这样的迷你功能的任何建议？我不是说编写整个代码，只是粗略的指导或解释将非常感激。

在JSFiddle上还有一个代码的工作示例：http://jsfiddle.net/X8geT/1/

Answer 1

免责声明：作为Backbone中的任何解决方案，有多种方法可以处理给定的问题，以下答案可能完全矫枉过正，应该尽量小心谨慎。

定义模型

它们将代表您的数据及其处理方式。在这里，我将定义一个问题模型（空，但你永远不知道），一个问题集合（定义了一个术语的过滤），以及一个负责存储当前术语和匹配问题的搜索状态控制器：

var Question = Backbone.Model.extend();

var Questions = Backbone.Collection.extend({
    model: Question,
    matches: function (term) {
        if (term==="")
            return [];

        term = term.toLowerCase();
        return this.filter(function(model) {
            return model.get('question').toLowerCase().indexOf(term)!==-1
        });
    }
});

var QuestionController = Backbone.Model.extend({
    defaults: {
        term: ""
    },
    initialize: function(opts) {
        this.questions = opts.questions; //known questions
        this.matches = new Questions();  //filtered questions

        //when the term changes, update the matches
        this.on('change:term', function (model, term) {
            this.matches.reset(this.questions.matches(term));
        }, this);
    }
});

定义您的观点

它们将在DOM中显示模型的状态，并将处理与用户的交互。让我们有一个将处理输入的SearchView和一个将显示当前建议的SuggestionsView：

var SearchView = Backbone.View.extend({
    events: {
        'keyup ': function (e) {
            this.model.set('term', this.$el.val());
        },
        'focus ': function (e) {
            this.trigger('start');
        },
        'blur ': function (e) {
            this.trigger('stop');
        }
    }
});

var SuggestionsView = Backbone.View.extend({
    initialize: function () {
        _.bindAll(this, 'activate', 'deactivate', 'render');
        this.listenTo(this.model.matches, 'reset', this.render);
    },
    activate: function () {
        this.$el.addClass('active');
        this.render();
    },
    deactivate: function () {
        this.$el.removeClass('active');
        this.$el.html(" ");
    },
    render: function () {
        var html = '';

        if (this.model.get("term") === "") {
            html = "<p> start typing a question </p>";
        } else {
            if (this.model.matches.length === 0) {
                html = "<p> No match </p>";
            } else {
                this.model.matches.each(function(model) {
                    html += '<p>'+model.get('question')+'</p>';            
                });
            }
        }        
        this.$el.html(html);
    }
});

将模型和视图结合在一起

实例化，绑定事件和运行

var questions = new Questions([
    {question: "what is your name"},
    {question: "How old are you"},
    {question: "what is your mothers name"},
    {question: "where do work/or study"}
]);
var controller = new QuestionController({
    questions: questions
});

var vSearch = new SearchView({
    el: '#suggestinput',
    model: controller
});
var vSuggestions=new SuggestionsView({
    el: '#suggestions',
    model: controller
});

vSuggestions.listenTo(vSearch, 'start', vSuggestions.activate);
vSuggestions.listenTo(vSearch, 'stop', vSuggestions.deactivate);

与http://jsfiddle.net/nikoshr/QSE95/

一起玩的小提琴

当然，你可以通过一个处理所有交互的视图来大大简化这一点，但哪里会很有趣？

将您的jQuery代码转换为Backbone.js结构

1 个答案:

定义模型

定义您的观点

将模型和视图结合在一起