select2 내 백본보기의 렌더링 방법

Question

Select2을 사용하여 선택 입력을 렌더링해야하는 백본보기가 있습니다.

Select2Cell = Backbone.View.extend({ 

    tagName: "select", 

    initialize: function(options) { 
     this.data = options.data; 
    }, 

    render: function() { 
     this.$el.select2({data: this.data}); 
     return this; 
    } 
}); 

내가 다른보기의 render() 안쪽이보기를 렌더링 해요 :

CellsContainerView = Backbone.View.extend({ 
    render: function() { 
     var view = new Select2Cell({data: [{id: 1, text: "Item 1"}]}); 
     this.$el.append(view.render().$el); 
     return this; 
    } 
}); 

문제는, 내가 CellsContainerView을 렌더링 할 때, 그것은 선택 2를 표시하지 않습니다.

$(document).ready(function() { 
    var containerView = new CellsContainerView({el: "#container"}); 
    containerView.render(); 
}); 

Answer 1

이 답변은 OP 코드가 입력하기 전에 작성되었습니다.

Select2 data은의 배열 일 필요가 있습니다.

[id: 1, text: "Item 1"] 

그래서 선택보기에 전달 된 옵션을 변경해야합니다 : 여기

{ data: [{ id: 1, text: "Item 1" }]} 

이 수정 프로그램 코드의 데모입니다 당신이 누락 된 괄호 {}주의, 잘못된 배열을 전달하는 :

var Select2Cell = Backbone.View.extend({ 
 
    tagName: "select", 
 

 
    initialize: function(options) { 
 
    this.data = options.data; 
 
    }, 
 

 
    render: function() { 
 
    this.$el.select2({ 
 
     data: this.data 
 
    }); // there was also a missing closing brace here 
 
    return this; 
 
    } 
 
}); 
 

 
var CellsContainerView = Backbone.View.extend({ 
 
    render: function() { 
 
    var view = new Select2Cell({ 
 
     data: [{ 
 
     id: 1, 
 
     text: "Item 1" 
 
     }] 
 
    }); 
 
    this.$el.append(view.render().el); 
 
    return this; 
 
    } 
 
}); 
 

 
var containerView = new CellsContainerView({ 
 
    el: "#container" 
 
}); 
 
containerView.render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 

 
<div id="container"></div>