Блог

Я работаю над созданием базового приложения для опроса, чтобы лучше понять модели / коллекции вложенности в Backbone. Я использую backbone-relational, чтобы помочь с этим.

Я могу просматривать опрос и отображать вопросы / ответы при использовании одного представления. Но когда я пытаюсь перевести их в отдельные представления вопросов / ответов, у меня возникают некоторые проблемы с их отображением.

Есть идеи, почему questionView не заполняет HTML #questions? Как всегда, любая помощь очень ценится!

Обзор показать вид:

 class SurveyMe.Views.SurveyShow extends Backbone.View

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

  initialize: ->
    @model.on('all', @render, this)
    @questionNumber = 0
    @questionLimit = @model.get("questions").length - 1

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

  back: ->
    if @questionNumber <= @questionLimit and @questionNumber > 0
      @questionNumber -= 1
      $("#container").html(@render().el)
    else
      Backbone.history.navigate("surveys",trigger: true)

  events:
      'click #answer': 'updateQuestion'
      'click #back': 'back'

  updateQuestion: ->
    if @questionNumber < @questionLimit
      @questionNumber  = 1
      $("#container").html(@render().el)
      choice = new SurveyMe.Models.Choice
      choice.save(
        choice:
          appuser_id: Cookie.get('survey_user_id')
          question_id: @model.get('questions')[@questionNumber]["id"]
          answer_id: "4"
      )
      @renderQuestion()
    else
      completion = new SurveyMe.Models.Completion
      completion.save(
        completion:
          survey_id: @model.get('id')
          appuser_id: Cookie.get('survey_user_id')
      )
      Backbone.history.navigate("surveys",trigger: true)

  renderQuestion: ->
    question = new SurveyMe.Models.Question(id: @model.get("questions")[@questionNumber]["id"])
    questionView = new SurveyMe.Views.Question(model: question)
    $('#questions').html(questionView.render().el)
  

Вопросный вид:

 class SurveyMe.Views.Question extends Backbone.View

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

  tagName: 'li'

  className: 'list-group-item text-center'

  events: 
    'click': 'edit'

  edit: ->
    Backbone.history.navigate("questions/#{@model.get('id')}",true)

  initialize: ->
    #alert("initialize "   @model.get('id'))
    @render()

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

survey_show.jst.eco (текст с комментариями работает для отображения вопросов / ответов без отдельных представлений вопросов / ответов)

 <h2 class="text-center"><%= @survey.get('title') %></h2>

<div class="row">
    <div class="3">
        <ul id="questions" class="list-group">

        <!--
            <li id="question" class="list-group-item text-center">
                <%= @survey.get("questions")[@questionNumber]["title"] %>
                <ul id="answers" class="list-group">
                    <% for answer, j in @survey.get("questions")[@questionNumber]["answers"]: %>
                    <li id="answer" class="list-group-item">
                        <%= @survey.get("questions")[@questionNumber]["answers"][j]["title"] %>
                    </li>
                    <% end %>
                </ul>
            </li>
        -->

        </ul>
    </div>
</div>

<button class="btn" id="back">Back</button>
  

вопрос.jst.eco

 <%= @question.get('title') %>
<ul class="list-group">
    <% for answer, i in @question.get("answers")[i]: %>
        <li id="answer" class="list-group-item">
            <%= @question.get("answers")[i]["title"] %>
        </li>
    <% end %>
</ul>
  

Модель опроса:

 class SurveyMe.Models.Survey extends Backbone.RelationalModel

  defaults: 
    title: 'Enter survey name'
    survey_limit: 1000
    number_taken: 0
    long: false
    survey_finished: false

   urlRoot: '/surveys'

   relations = [{
     type: Backbone.HasMany,
     key: 'questions',
     relatedModel: 'SurveyMe.Models.Question'
     reverseRelation: {
        key: 'survey',
        includeInJSON: 'id'
     }
   }]
  

Модель вопроса:

 class SurveyMe.Models.Question extends Backbone.RelationalModel

   urlRoot: '/surveys'

   relations = [{
     type: Backbone.HasMany,
     key: 'answers',
     relatedModel: 'SurveyMe.Models.Answer'
     reverseRelation: {
        key: 'question',
        includeInJSON: 'id'
     }
   }]
  

Модель ответа:

 class SurveyMe.Models.Answer extends Backbone.RelationalModel

    urlRoot: '/answers'