0

更新: 問題は解決し、ケースはクローズされました。

コードの一部を動作させるのにまだ問題があります。

私のビューは、コレクションの更新をリッスンするようになりました。何が起こるかは次のとおりです。

  • 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 を参照していません。

以下の問題は解決しました

私が達成しようとしているのは、ビュー モジュール (検索) でコレクション (結果) 内のイベントをトリガーできるようにすることです。

検索ビューが送信されると、入力フィールドをコレクションの fetch メソッドに渡して、サーバーから結果を取得する必要があります。現在、ビューから関数をトリガーできますが、関数はコレクションのメソッドにアクセスできません。

以前は、ビュー/コレクションが変数名によって直接相互に参照するようにしていました。
コードをモジュールに分割したため、View/Collection は相互に直接アクセスできなくなりました。

コードの一部を次に示します: (Coffeescript で記述)

app.coffee - global_dispatcher がバックボーンに適用されます

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 に答える