2014-01-29 2 views
1

Ember.js를 사용하여 응용 프로그램을 만들려고합니다.Ember에서 "이야기"응용 프로그램을 구성하는 방법을 모르십시오.

한 가지를 클릭하면 다음 옵션으로 이동합니다.

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 

:

처럼, 나는 URL이처럼 살고 싶지 않아.

동일한 페이지에서 동일한 템플릿과 함께 사용할 다중보기를 생성하는 예가 있습니까?

Ergh. 나는 이것을 묻는 더 좋은 방법이 있었으면 좋겠다. 나는 Ember.js를 정말로 좋아하고 싶다. 그러나 라우터와 URL에 너무 많은 부분이 있다는 사실은 내가 이것을 가장 좋은 방법으로 구조화하는 것을 상상하기 어렵게 만든다.

+0

템플릿은 무엇을 기반으로할까요? 그것은 당신에게 10 개의 모델이 있다고 생각합니다. (각 모델은 관련 답변을 가지고 있습니다.) 질문은 일반적인 템플릿 집합입니까? – Kingpin2k

+0

각 질문에 대한 템플릿은 동일합니다. 그런 다음 옆에 클릭을 통해 각 질문에 대해 다른 답변을 표시하는 질문 사이에 공유되는 템플릿이 있습니다. 적어도 그것은 그 아이디어입니다. –

답변

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"

같은 동적 경로를 가질 수 있습니다

그것은 당신을 위해 OK 설정의 경우, 여기에 몇 가지 코드입니다 그런 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] 경로에서 다음

, 너는 재시도 할 수있어. 당신은 질문, 또는 개별 하나의 거대한 목록 중 하나를 URN :

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); 
    } 
}); 

을 이제 '/ 질문/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 

OK, 나는 그것의 일부는 브레인 스토밍에 도움이되기를 바랍니다. 그리고 오타/오류/기타에 대해 사과드립니다.

+0

이들은 환상적인 아이디어입니다.당신은 사과 할 필요가 없습니다, 당신은 정말로 감사하고있는 도움을 제공하고 있습니다. –

+0

정말 좋은 다리를 보여 주었기 때문에 대답을 받아 들일 것입니다. 나는 Ember, Router, URL에 맞서 싸우려고했으나 한 가지 방법으로 생각하는 것이 실제로 의미가 없다고 생각합니다. –

관련 문제