백본 중첩 된보기 - 템플릿에 자식보기 특성이 잘못 설정되었습니다.

Question

다른 모델의 컬렉션이 포함 된 백본 모델 (Library)을 만들려고합니다 (Books이라고 할 수 있음). 나는 BookView에 의해 생성 된 HTML에 의해 표현 된 일련의 서적과 함께 책 케이스의 HTML을 생성하는보기 -을 제공하고있다. 또한, 나는 내 템플릿 시스템으로 Handlebars.js를 사용하고 있습니다.

내가 겪고있는 문제는 BookView이 render() 함수를 전달하기 전에 this.el 요소에서 이상한 html을 반환한다는 것입니다.

LibraryModel 모델

var LibraryModel = Backbone.Model.extend({ 

    initialize: function() { 

     var books = new BookCollection(); 

     _.each(book_data.books, function(value, index) { 
     books.add(new Book()); 
     }); 

     this.books = books; 

    } 
    }); 

LibraryView보기 :

var LibraryView = Backbone.View.extend({ 

    el: "#library", 

    render: function() { 

     var t = this; 

     this.model.books.each(function(book, index) { 
     //create new view for each Book model in the books collection 
     var view = new BookView(book); 
     //append HTML produced by the BookView into LibraryView el element 
     t.$el.append(view.render().$el); 
     }); 

     return this; 
    }, 

    initialize: function() { 
     //snip 
    } 
    }); 

BookView보기 :

var BookView = Backbone.View.extend({ 

    render: function() { 
     var viewmodel = this.model; 
     var source = $("#book-template").html(); 
     var template = Handlebars.compile(source); 
     var html = template(viewmodel.toJSON()); 

     console.log(html); //prints <div test="wtf" anotherTest="123"><b>wtf</b> 123</div> 
     this.$el.html(html); 

     return this; 
    }, 

    initialize: function(book) { 
     console.log(this.el.outerHTML); //prints <div test="wtf" anotherTest="123"></div> 
     this.model = book; 
     this.listenTo(this.model, "change", this.render); 
    } 
    }); 

테 내가 제공하고 mplate은 다음과 같습니다 <b>{{test}}</b> {{anotherTest}}

BookModel 모델

var BookModel = Backbone.Model.extend({ 
    defaults: { 
     test: "wtf", 
     anotherTest: 123 
    }, 

    initialize: function() { 
     //snip 
    } 
    }); 

기본적으로, 나는 exeperiencing하고있는 문제는 내 BookView 내 모델의 각은 백본 생성 div에 연결된 속성 이상한 HTML을 생성하는 것입니다 , 이렇게 :

<div test="wtf" anotherTest="123"> 
<b>wtf</b> 123 
</div> 

코드의 다른 곳에서는 속성을 설정하지 않습니다. 두 값 모두 com입니다. 기본 설정과 다릅니다.

또한, 나는 백본에 HTML-부가 요소가 BookView 모델의 div을 (주, 나는 수동 태그 이름 또는 엘을 제공하고 있지 않다 생성 된 모델 속성이 삽입 될이, 핸들 바이하고있는 일이 아닙니다 확인, 나는 백본을 원하는 나를 위해 div 만들기).

그래서 여기에 내가 붙어 있습니다. 나는 목록에 내 모델의 각 BookView에 의해 생성 된 HTML의 완벽하게 작업 목록을 가지고 있지만, 어떤 이유로 백본 생성 DIV 래퍼과 같이 그 HTML-속성에서 모델의 각 속성이 포함되어

<div id="#library"> 
<div test="wtf" anotherTest="123"><b>wtf</b> 123</div> 
<div test="wtf" anotherTest="123"><b>wtf</b> 123</div> 
<div test="wtf" anotherTest="123"><b>wtf</b> 123</div> 
</div> 

나는 이것을 통해 내 머리카락을 정말로 끌어 내고 있으며 View-in-a-View를 사용하려고한다는 사실과 관련이 있다는 의혹을 가지고 있습니다.

이전에 비슷한 문제가 발생 했습니까? MasterView가 ChildView 컬렉션을 렌더링하는 백본 어플리케이션의 좋은 예가 있습니까?

Answer 1

새로운 BookViews을 만들 때 이상한 일을합니다. 이 견해는 BookModel이 초기화 될 것으로 예상하고 있습니다. 그러나 initialize() 메서드는 항상 attributes이라는 개체를 규칙 상으로 사용합니다.

var BookView = Backbone.View.extend({ 

    render: function() { 
     // keep the same code 
    }, 

    initialize: function(attributes) { 
     this.listenTo(this.model, "change", this.render); 
    } 
}); 

당신을에

가 LibraryView 사용한다 : 대신 이전의

var view = new BookView({ model : book }); 

:

var view = new BookView(film); // which is a typo, and should pass book and not film 

을 이제 당신은 당신의 예상 얻을 당신은 당신의 BookView이 때문에이 일치 수정해야 결과. 당신이 set(attr, value)를 직접 호출 할 필요가 없습니다

<div id="library"> 
    <div><b>wtf</b> 123</div> 
    <div><b>wtf</b> 123</div> 
    <div><b>wtf</b> 123</div> 
</div> 

, initialize(attributes)가 자동으로 매핑 설정 호출 있음을 유의하십시오. 이 점을 염두에두고 우리는 두 뷰의 속성이 실제로 두 모델의 특성 (초기화시 set()) 인 이유를 이해할 수 있습니다.