Question

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

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

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

我很难想到如何构建它。 10个问题有可能是动态的，因为你必须从一个到另一个，所以为每个选项都有一个URL没有意义，因为你将一次完成一个。

就像，我不希望网址最终结束：

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

这是不切实际的......至少，这对我来说似乎不切实际。

是否有任何关于生成多个视图以在同一页面上使用相同模板的示例？

Ergh。我希望我有更好的方式来问这个问题。我真的很想要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

好的，这是一长串代码，我希望其中一些有助于头脑风暴。我为任何错别字/错误/等道歉。

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

1 个答案: