【问题标题】:Backbone Save() Not Sending Post骨干保存()不发送帖子
【发布时间】:2014-06-13 03:34:07
【问题描述】:

我是 Backbone 的新手,所以希望我只是缺少一些简单的东西。我正在构建一个简单的调查创建/调查应用程序来处理嵌套模型等。我正在为后端运行一个安静的 Rails 服务器。

不过,我正在努力将调查模型保存到服务器。似乎没有实际发生发布请求,因此它实际上并没有得到更新。有什么我想念的想法吗?

调查模型:

class SurveyMe.Models.Survey extends Backbone.Model

调查编辑视图:

 class SurveyMe.Views.SurveyEdit extends Backbone.View

      template: JST['templates/surveys/survey_edit']

      initialize: ->
        @model.on('all', @render, this)

      events: {
        'click #back': 'back'
        'submit #survey': 'update'
      }

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

      back: ->
        Backbone.history.navigate("surveys",true)

      update: ->
        @model.set("title", $('#title').val())
        @model.set("survey_limit", $('#survey_limit').val())
        @model.save()
        Backbone.history.navigate("surveys",true)

调查编辑模板:

<h1>Edit Survey</h1>
<form id="survey">
<div class="input-group">
    <span class="input-group-addon">Title:</span>
    <input id="title" type="text" class="form-control" value="<%= @survey.get('title') %>">
    <br>
</div>
<br>
<div class="input-group">
    <span class="input-group-addon">Desired Responses:</span>
    <input id="survey_limit" type="text" class="form-control" value="<%= @survey.get('survey_limit') %>">
    <br>
</div>
<hr>
<button class="btn" id="back">Back</button>
<input type="submit" class="btn" id="update" value="Update">
</form>

编辑:添加索引/路由器/集合

索引:

class SurveyMe.Views.SurveysIndex extends Backbone.View

  template: JST['templates/surveys/index']

  events:
    'submit #survey':'createSurvey'

  initialize: ->
    @collection.on('reset', @render, this)
    @collection.on('add', @addSurvey, this)

  render: ->
    $(@el).html(@template())
    @collection.each(@addSurvey)
    console.log(@collection.length)
    this  

  addSurvey: (survey) ->
    view = new SurveyMe.Views.Survey(model: survey)
    @$('#surveys').append(view.render().el)

  createSurvey: ->
    console.log("Survey created")

路由器:

class SurveyMe.Routers.Surveys extends Backbone.Router
  routes: 
    'surveys/:id': 'edit',
    'surveys': "index"

  initialize: ->
    @collection = new SurveyMe.Collections.Surveys()
    @collection.fetch(reset: true)

  index: ->
    view = new SurveyMe.Views.SurveysIndex(collection: @collection)
    $("#container").html(view.render().el)

  edit: (id) ->
    survey = @collection.get(id)
    view = new SurveyMe.Views.SurveyEdit(model: survey)
    $("#container").html(view.render().el)

收藏:

class SurveyMe.Collections.Surveys extends Backbone.Collection

  model: SurveyMe.Models.Survey

  url: '/surveys/'

【问题讨论】:

  • 您能否在您的编辑路线中进行一些调试,看看以下两件事是否属实:@ 已定义且调查已正确找到。
  • @ 作为对象返回,并且随着survey.get('title') 拉回标题,似乎可以正确找到调查
  • 在您的 createSurvey 方法中,您可以在那里放置一个调试器语句。似乎您需要抓住事件并停止传播;当您提交表单时,调试器将再次确认您声明该方法没有被调用。

标签: javascript jquery backbone.js backbone-views


【解决方案1】:

在这里猜测,但可能是因为您在咖啡脚本中使用的是简单箭头而不是粗箭头:

update: ->
  @title = $('#title').val()
  @survey_limit = $('#survey_limit').val()
  this.save()

您是从偶数开始使用此方法的,这意味着this 的作用域是事件触发器而不是模型。使用粗箭头:

update: =>

应该没问题...

【讨论】:

  • 好主意-可能是问题的一部分:)。但我仍然没有看到 POST 请求甚至触发。
  • 在浏览器中你应该可以调试你的JS,只需要检查代码是否被调用并且属性是否在模型中设置。如果您有来自主干的调试代码,您还可以检查“保存”方法中发生的情况。也许您在模型中定义了一个“验证”方法,但它没有通过验证?
【解决方案2】:

您的问题可能在您模型的update 函数中。我没有看到最初填充模型的fetch() 调用,所以我猜测数据仅在客户端填充,然后发送到服务器端。如果是这种情况,您需要在模型中设置此数据。您可以在保存调用之前执行此操作:

this.model.set("title", $('#title').val());
this.model.set("survey_limit", $('#survey_limit').val());

或者您可以直接在保存调用中执行此操作:

this.model.save({
   title: $('#title').val(),
   survey_limit: $('#survey_limit').val()
});

可以在模型中执行此操作,但正如您从上面的代码中看到的那样,我建议将该逻辑放在视图中。这样模型就不必了解视图本身的内容。

【讨论】:

  • 实际上我最初确实会获取数据(请参阅上面的编辑)。我更改了编辑视图中的更新功能以设置数据然后保存。但它似乎仍然没有填充服务器,只是更新模型 - 我还更新了上面的代码。
  • 您能在浏览器中看到POST 请求中发送的值吗(使用检查器)?如果数据在模型中,它真的应该发送它......我很想看看它是否不是。
  • 这就是整个问题 - 我实际上没有看到 POST 请求触发。
【解决方案3】:

你的模型也应该有这样的东西,

model.collection

如果您将 {collection: ...} 作为选项传递,模型将获得一个集合属性,该属性将用于指示模型属于哪个集合,并用于帮助计算模型的 url。 model.collection 属性通常在您首次将模型添加到集合时自动创建。请注意,反之亦然,因为将此选项传递给构造函数不会自动将模型添加到集合中。有时很有用。

再想一想,你确定你的 REST url 应该是“/surveys”吗?在我们的应用程序中,我们为 urlRoot 中指定的模型提供了单独的 url。

例如,如果集合 c 有模型 m1、m2,

c1 -> url (/surveys) - 调查将接受对象集合的地方

m1 , m2 -> (/survey) - 调查将接受模型(单个对象)

希望这会有所帮助。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-07-23
    • 2012-04-24
    相关资源
    最近更新 更多