不知道如何在 ember 中构建“故事”应用程序

Question

我正在尝试使用 Ember.js 创建一个应用程序。

你点击一件事，它会带你进入下一个选项。

再次点击，进入下一个选项，以此类推，共 10 个问题。

我很难考虑我想如何构建它。这 10 个问题可能是动态的，由于您必须从一个问题转到下一个问题，因此为每个选项设置一个 URL 是没有意义的，因为您将一次解决一个问题。

就像，我不希望 url 像这样结束：

http://somesite.com/#/question1/option3/question2/option4/question3/option1/question4/option2/question5/option2/question6/option2/question7/option2/question8/option2/question9/option2/question10/option2

只是不实用……至少在我看来不实用。

是否有生成多个视图以在同一页面上与同一模板一起使用的示例？

呃。我希望我有更好的方法来问这个问题。我真的很想喜欢 Ember.js，但事实上它在路由器和 URL 上放置了这么多，这让我很难想象如何以最佳方式构建它。

Answer 1

这是一种组织方式：

BIG_GIANT_ARRAY_OF_QUESTIONS = [
  {
    id: 1,
    question_text: 'I am the first question',
    answers: [{
      answer_text: 'I am an answer',
      next_question_id: 2
    },{
      answer_text: 'I am another answer',
      next_question_id: 3
    }
  },
  //another question object
]

所以每个问题都有一个 id，每个答案都会提到另一个 id 以使故事继续下去。

如果你的设置没问题，这里有一些代码：

首先，您可以拥有像“somesite.com/#/questions/4”这样的动态路由

在您的路由器中，您可以像这样构建一个 URL：

YourStoryApp.Router.map(function() {
  //other routes
  this.resource('questions', function() {
    this.resource('question', {path: '/:question_id'}
  });
});

此处的详细信息：[http://emberjs.com/guides/routing/defining-your-routes/#toc_dynamic-segments][1]

然后在路线中，您可以返回您的问题列表或单个问题：

YourStoryApp.QuestionsRoute = Ember.Route.extend({
  model: function(params) {
    return BIG_GIANT_ARRAY_OF_QUESTIONS;
  }
});

YourStoryApp.QuestionRoute = Ember.Route.extend({
  model: function(params) {
    return this.modelFor('questions').findBy('id', params.question_id);
  }
});

现在，每当您访问“/questions/4”时，您都会从您的 BIG_GIANT_ARRAY_OF_QUESTIONS 中收到该问题。

最后这可能是你的问题模板（还有一些 html）：

Question {{id}}
{{question_text}}

Answers
{{#each answers}}
  {{#link-to 'question' next_question_id}}
    {{answer_text}}
  {{/link-to}}
{{/each

好的，这是一段很长的代码，我希望其中一些有助于头脑风暴。对于任何错别字/错误/等，我深表歉意。