0

更新：问题解决，案件结案。

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

我的视图现在监听集合以获取更新，应该发生的是：

  • ListView 监听结果集合
  • 结果已同步
  • ListView 为每个 Result 创建一个 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);
},

在上面的代码中，变量 view 存在，它的元素也存在，但是“this”不再引用 ListView。

下面的问题解决了

我想要完成的是让视图模块（搜索）能够触发集合（结果）中的事件。

当 Search View 被提交时，它应该将输入字段传递给 Collection 的 fetch 方法以从服务器检索结果。目前，我可以从 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' 的函数已触发，但无法从此处访问集合 'results'。

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
4

1 回答 1

0

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

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();
    }
});
于 2012-12-29T00:48:23.893 回答