Question

更新：问题已解决，案件已关闭。

我仍然无法让我的代码的一部分工作。

我的视图现在侦听更新集合，应该发生的是：

ListView侦听结果集
结果已同步
ListView为每个结果创建一个ItemView
ListView（ul）追加每个ItemView（li）

一切似乎都很好，直到最后一步。

ListView中应该将结果添加到列表中的函数无法访问ListView的元素。

我可以创建一个ItemView，并检索它的元素“<li>”，但是ListView的“<ul>”不能在函数中引用。

ListView中的示例代码位：

el: $('.result-list'),

initialize: function() {
   this.listenTo(this.collection, 'add', this.addOne);
},

addOne: function(result) {
   view = new ItemView({ model: result });
   this.$el.append(view.render().el);
},

在上面的代码中，变量视图和它的元素一样存在，但是“this”不再引用ListView。

以下问题已解决

我想要实现的是让View模块（搜索）能够触发Collection（结果）中的事件。

提交搜索视图时，它应将输入字段传递给Collection的fetch方法以从服务器检索结果。目前，我可以从View中触发一个函数，但该函数无法访问任何Collection的方法。

以前，我让View / Collection通过变量名直接引用彼此由于我已将代码分离为模块，因此View / Collection不能再直接访问彼此。

以下是一些代码:(用Coffeescript编写）

app.coffee - global_dispatcher应用于Backbone

define [
    'jquery'
    'underscore'
    'backbone'
    'cs!router'
], ($, _, Backbone, Router) ->
    # global_dispatcher added to all Backbone Collection, Model, View and Router classes
    dispatcher = _.extend {}, Backbone.Events, cid: 'dispatcher'
    _.each [ Backbone.Collection::, Backbone.Model::, Backbone.View::, Backbone.Router:: ], (proto) ->
        _.extend proto, global_dispatcher: dispatcher

    new Router()

router.coffee - 这是我遇到麻烦的地方。触发了“getResults”的功能，但无法从此处访问集合“结果”。

define [
    'backbone'
    'cs!views/resuls/list'
    'cs!views/results/search'
    'cs!collections/results'
], (Backbone, ListView, SearchView, Results) ->
    Backbone.Router.extend
        routes:
            # URL routes
            '': 'index'

        index: ->
            results = new Results
            new ListView { model: results }
            new SearchView

            @global_dispatcher.bind 'getResults', (data) ->
                console.log results

search.coffee - 查看哪个触发事件，它将成功触发事件并传递正确的参数。

define [
    'jquery'
    'backbone'
], ($, Backbone) ->
    Backbone.View.extend
        events:
            'submit #search-form': 'submit'

        submit: (evt) ->
            evt.preventDefault()

            phrase = @.$('input').val()
            @.$('input').val('')

            args = name: phrase

            @global_dispatcher.trigger 'getResults', args

Answer 1

如果我正确理解你的问题，那就不难解决了。这里有一些虚拟代码来说明：

var Results = Backbone.Collection.extend();
var Search = Backbone.View.extend({
    someEventHandler: function() {
        // The next line accesses the collection from the view
        this.collection.fetch();
    }
});
var results = new Results();
var search = new Search({collection: results});

如果您希望视图在结果返回后执行某些操作，只需绑定集合上的事件处理程序：

var Search = Backbone.View.extend({
    fetchResposne: function() { /* do something*/},
    someEventHandler: function() {
        // The next line accesses the collection from the view
        this.collection.on('sync', this.fetchResponse);
        this.collection.fetch();
    }
});

BackboneJS + RequireJS允许视图使用全局事件调度程序对集合进行操作

1 个答案: