Question

我正在尝试通过潜入并构建一个简单的“问题”应用程序来学习Backbone，但我一直在试图弄清楚如何正确使用模型和/或集合。我已将代码添加到我自己丢失的地方。我能够获取集合以获取JSON文件（执行“var list = new QuestionList; list.getByCid（'c0'）似乎返回第一个问题），但我无法弄清楚如何更新使用该模型，使用当前模型获取视图的数据，然后在单击“下一步”按钮时如何使用下一个问题更新模型。

我想要的是一个简单的应用程序，它在加载时提取JSON，显示第一个问题，然后在按下按钮时显示下一个问题。

有人能帮助我连接点吗？

/questions.json

[
  {
    questionName: 'location',
    question: 'Where are you from?',
    inputType: 'text'
  },
  {
    questionName: 'age',
    question: 'How old are you?',
    inputType: 'text'
  },
  {
    questionName: 'search',
    question: 'Which search engine do you use?'
    inputType: 'select',
    options: {
      google: 'Google',
      bing:   'Bing',
      yahoo:  'Yahoo'
    }
  }
]

/app.js

var Question = Backbone.Model.Extend({});
var QuestionList = Backbone.Collection.extend({
  model: Question,
  url: "/questions.json"
});

var QuestionView = Backbone.View.extend({
  template: _.template($('#question').html()),
  events: {
    "click .next" : "showNextQuestion"
  },
  showNextQuestion: function() {
    // Not sure what to put here? 
  },
  render: function () {
    var placeholders = {
      question: this.model.question, //Guessing this would be it once the model updates
    }
    $(this.el).html(this.template, placeholders));
    return this;
  }
});

Answer 1

很明显，在当前的设置中，视图需要访问比单个模型更大的范围。这里有两种可能的方法，我可以看到。

1）将集合（使用new QuestionView({ collection: theCollection })）而不是模型传递给QuestionView。维护一个索引，您可以在click事件上递增并重新呈现。这应该类似于：

var QuestionView = Backbone.View.extend({

  initialize: function() {
     // make "this" context the current view, when these methods are called
     _.bindAll(this, "showNextQuestion", "render");
     this.currentIndex = 0;
     this.render();
  }      
  showNextQuestion: function() {
     this.currentIndex ++;
     if (this.currentIndex < this.collection.length) {
         this.render();
     }
  },
  render: function () {
    $(this.el).html(this.template(this.collection.at(this.currentIndex) ));
  }
});

2）设置Router并在点击事件上调用router.navigate("questions/" + index, {trigger: true})。像这样：

var questionView = new QuestionView( { collection: myCollection });

var router = Backbone.Router.extend({
    routes: {
        "question/:id": "question"
    },

    question: function(id) {
        questionView.currentIndex = id;
        questionView.render();
    }
});

使用带有静态JSON的Backbone.js模型/集合

1 个答案: