backbone.js 다른 모델 내에서 여러 모델 렌더링/생성

Question

다음과 같이하고 싶습니다. 몇 가지 문제와 학년이있는 숙제를했다고 상상해보십시오. 각 문제에는 여러 부분과 난이도가 있습니다. 각 부분에는 옳고 그름의 속성이 있습니다.

중첩 된 모델을 통해 로직을 구현하고 싶습니다. (또는 정말로 할 수 있지만, 이것은 최선의 추측입니다.) 그래서 옳고 그름의 속성을 가진 모델 '파트'가있을 것입니다. 그러면 문제라고 불리는 모델이 있습니다.이 모델에는 여러 부분이 있습니다 (컬렉션이 가능한지 확실하지 않음) 및 속성 난이도가 있습니다. 그렇다면 당신은 그것에 관련된 몇 가지 문제와 속성 등급을 가진 모델 숙제를 갖게 될 것입니다.

내 질문은 :

이게 가능합니까? 그렇다면 일반적인 모델 생성 구문은 무엇입니까? 이것을 렌더링하는 구문은 무엇입니까?

나는 이런 식의 일반적인 찾고 있어요 : 그래서

var Homework=Backbone.model.extend({ 
    defaults:{ 
    grade:100, 
    parts: var parts=Backbone.model.extend({ .... //this definitely seems wrong }); 
    }, 
}); 

var Homeworkview=Backbone.view.extend({ 
    initialize: function(){ 
    //create one question with one part 
    }, 
    render: function(){ 
    //render template for homework grade then call function to render question, which then renders parts}, 
}); 

이렇게 어떻게?

Answer 1

이렇게하는 방법에는 여러 가지가 있습니다. Backbone Layout Manager은 중첩 된 모델을 처리하는 멋지고 관용적 인 방법을 제공하지만 더 작은 (또는 특수화 된) 응용 프로그램의 경우에는 자신의 롤을 만들고 싶을 수도 있습니다. Homework과 Problem 사이의 관계는 Problem과 Part 사이의 관계와 매우 유사하게 보입니다. 이전의 관계를 처리하는 방법 중 하나가 있습니다. 모델과 컬렉션을 정의하여

시작 :

var Problem = Backbone.Model.extend({ 
    // defaults, constructor, etc. 
}); 

var ProblemCollection = Backbone.Model.extend({ 
    model: Problem 
}); 

다음, "부모"모델은 문제의 컬렉션을 추적 할 수있는 방법이 필요합니다. 필요한 경우 좀 more explanation here를 썼다,하지만 일반적인 생각은 다음과 같습니다

var Homework = Backbone.Model.extend({ 

    defaults:{ 
    grade:100, 
    problems: [] 
    }, 

    initialize: function() { 
    // initialize a collection of the "Problems" in this Homework 
    this.problems = new ProblemCollection(this.get('parts')); 
    } 
}); 

을 다음은,보기를. 하위보기는 원하는 것이 될 수 있습니다.

var ProblemView = Backbone.View.extend({ 
    tagName: 'li' 
    // rendering, initializers, etc. 
}); 

상위보기는 아마도 조금 더 복잡 할 것입니다. Homework 모델에 저장된 Problem 모델의 컬렉션이 모두 필요하므로 필요에 따라 각각에 대해 새보기를 만들 수 있습니다.

var HomeworkView = Backbone.View.extend({ 

    render: function() { 

    // create a container for problems 
    var $problems = $('<ul class="problem-list"></ul>'); 

    // create a view for each problem 
    this.model.problems.each(function (model) { 
     var $problem = $('<li class="problem"></li>'), 
      problemView = new ProblemView({ 
      model: model, 
      el: el 
      }); 
     $problems.append($problem); 
    }); 

    this.$el.empty().append($problems); 

    return this; 
    } 
}); 

이 정보가 도움이되기를 바랍니다.