1

私は単純だが紛らわしい問題を抱えています。次のコードがあります。

<div id="restaurant_locations"></div>

<script type="text/javascript">
  $(function() {
    window.router = new Lunchhub.Routers.RestaurantLocationsRouter({
      restaurantLocations: <%= @restaurant_locations.to_json.html_safe -%>
    });
    Backbone.history.start({pushState: true});
  });
</script>

このエラーがスローされます：

Uncaught TypeError: Cannot call method 'toJSON' of undefined

{pushState: true}ただし、その部分を取り出して、Backbone.history.start()引数なしで行うと、問題なく機能します。

エラーの横に、 と表示されますshow_view.js: 19。その部分はshow_view.js次のようになります。

    ShowView.prototype.template = JST["backbone/templates/restaurant_locations/show"];

    ShowView.prototype.render = function() {
      $(this.el).html(this.template(this.model.toJSON())); // LINE 19
      Uncaught TypeError: Cannot call method 'toJSON' of undefined
      return this;
    }

だから私this.modelは未定義だと思います。コーヒースクリプトは次のshow_viewとおりです。

Lunchhub.Views.RestaurantLocations ||= {}

class Lunchhub.Views.RestaurantLocations.ShowView extends Backbone.View
  template: JST["backbone/templates/restaurant_locations/show"]

  render: ->
    $(@el).html(@template(@model.toJSON() ))
    return this

必要なものを作ることができれば@model、問題は解決するかもしれません。しかし、私はどこ@modelから来たのか何も知りません。

私は何をする必要がありますか？

編集：もう少し進みました。以下のshow関数では、idは「restaurant_locations」に設定されており、もちろん の@restaurantLocationsID を持つのメンバーはありませんrestuarant_locations。idset set toという事実にrestaurant_locationsはある程度の意味があります。ヒットしている URL はhttp://localhost:3000/restaurant_locations. しかし、それが目的の URL である場合indexは、 ではなく関数を呼び出す必要があるようです。show

class Lunchhub.Routers.RestaurantLocationsRouter extends Backbone.Router
  initialize: (options) ->
    @restaurantLocations = new Lunchhub.Collections.RestaurantLocationsCollection()
    @restaurantLocations.reset options.restaurantLocations

  routes:
    "new"      : "newRestaurantLocation"
    "index"    : "index"
    ":id/edit" : "edit"
    ":id"      : "show"
    ".*"        : "index"

  newRestaurantLocation: ->
    @view = new Lunchhub.Views.RestaurantLocations.NewView(collection: @restaurantLocations)
    $("#restaurant_locations").html(@view.render().el)

  index: ->
    @view = new Lunchhub.Views.RestaurantLocations.IndexView(restaurantLocations: @restaurantLocations)
    $("#restaurant_locations").html(@view.render().el)

  show: (id) ->
    restaurant_location = @restaurantLocations.get(id)

    @view = new Lunchhub.Views.RestaurantLocations.ShowView(model: restaurant_location)
    $("#restaurant_locations").html(@view.render().el)

  edit: (id) ->                   
    restaurant_location = @restaurantLocations.get(id)

    @view = new Lunchhub.Views.RestaurantLocations.EditView(model: restaurant_location)
    $("#restaurant_locations").html(@view.render().el)
4

1 に答える 1

0

idはに設定されており、もちろん、の"restaurant_locations"メンバーはありませ@restaurantLocationsん。id"restuarant_locations"

ルーティングに問題があるようですので、ルートを見てみましょう。

routes:
  "new"      : "newRestaurantLocation"
  "index"    : "index"
  ":id/edit" : "edit"
  ":id"      : "show"
  ".*"       : "index"

そこにいくつかの問題があります。まず第一に、ルートは正規表現ではないため、".*"何が行われるか/.*/（つまり、文字のシーケンス）とは一致せず、実際には任意の数のピリオド（つまり、/^.*$/）と一致します。あなたはそれを自分で実行して、_routeToRegex何が起こるかを見ることができます'.*'：

var namedParam    = /:\w+/g;
var splatParam    = /\*\w+/g;
var escapeRegExp  = /[-[\]{}()+?.,\\^$|#\s]/g;
//...
_routeToRegExp: function(route) {
  route = route.replace(escapeRegExp, '\\$&')
               .replace(namedParam, '([^\/]+)')
               .replace(splatParam, '(.*?)');
  return new RegExp('^' + route + '$');
},

次の問題は、":id"ほとんどすべてに一致することです。routeToRegexpに変換":id"し/^([^/]+)$/ます; その正規表現は、空でない非スラッシュのシーケンスと一致し、特に、他のほとんどのルートが一致するものと一致します。

'.*': 'index'したがって、からヒットすることを期待して/restaurant_locationsいる場合、実際にヒット':id': 'show'していることになり、それが幸運に'/new'なり、'/index'によっても一致しなくなり':id'ます。（Java | Coffee）Scriptオブジェクトの要素の順序は実装で定義されているため、ソースコードに表示される順序は実際には重要ではないことに注意してください。多くのJavaScript実装はソースの順序を尊重しますが、ソースの順序に依存することはありません。

ルートの順序は重要ではないため、routesキーを単純な順序付けられていないセットと見なす必要があります。また、人間であるあなたは、ルートパターンが実際に異なるものと一致することを確認する必要があります。重複するルートパターンが必要で、特定の順序で一致させる必要がある場合はroute、ルーターのメソッドを使用initializeして、必要な順序でルートを（ルーティングパターンまたは正規表現として）手動で追加できます。

エグゼクティブサマリー：ルートを修正して、異なるものと一致するようにします。

于 2012-06-27T17:41:09.380 に答える