보기에 매개 변수를 전달하는 방법


93

클릭하면 버튼 바로 아래에 팝업 메뉴가 표시되는 일련의 버튼이 있습니다. 버튼의 위치를 ​​뷰에 전달하고 싶습니다. 어떻게 할 수 있습니까?

ItemView = Backbone.View.extend({
    tagName: 'li',
    events: {
        'click': 'showMenu'
    },
    initialize: function() {
        _.bindAll(this, 'render');
    },
    render: function() {
    return $(this.el).html(this.model.get('name'));
    },
    showMenu: function() {
        var itemColl = new ItemColl();
        new MenuView({collection: itemColl}); // how to pass the position of menu here?
    }
});

답변:


168

MenuView를 구성 할 때 추가 매개 변수를 전달하기 만하면됩니다. initialize기능 을 추가 할 필요가 없습니다 .

new MenuView({
  collection: itemColl,
  position: this.getPosition()
})

그 다음에 MenuView, 당신은 사용할 수 있습니다 this.options.position.

UPDATE :@mu이 너무 짧은 상태입니다 1.1.0 이후, 백본보기가 더 이상 자동으로 this.options로 생성자에 전달 옵션을 부착 없지만, 당신이 선호하는 경우에 당신이 그것을 스스로 할 수 있습니다.

따라서 귀하의 initialize방법에서 options전달 된 것을 this.options다음 과 같이 저장할 수 있습니다 .

initialize: function(options) {
    this.options = options;
    _.bindAll(this, 'render');
},

또는 @Brave Dave가 설명한대로 더 미세한 방법을 사용하십시오 .



1
이것은 완벽하게 작동합니다. view initialize 메소드에 매개 변수를 추가하기 만하면됩니다. initialize : function (options) {alert (options.position); }
Cabuxa.Mapache 2014

@ Cabuxa.Mapache 아니요, 작동하지 않습니다. 이 대답은 사용 this.options.position하지 않습니다 options.position. initialize인수 를 첨부하는 데 사용되는 뷰 this.options는 1.1.0에서 발생하지 않습니다.
mu는 너무 짧습니다.

46

다음에 옵션 인수 추가 initialize:

initialize: function(options) {
    // Deal with default options and then look at options.pos
    // ...
},

그런 다음보기를 만들 때 몇 가지 옵션을 전달합니다.

var v = new ItemView({ pos: whatever_it_is});

자세한 정보 : http://backbonejs.org/#View-constructor


이것은 대부분의 상황에서 더 우아하고 간단합니다.
Cullen SUN

@CullenSUN : 감사합니다. 저는이 접근 방식의 명시 성을 선호합니다. 마법의 "원거리에서의 동작"을 사용 this.options하면 유지 관리 및 디버깅에 악몽이 생깁니다.
mu가 너무 짧습니다.

나는 백본 링크를 먼저 보았지만 귀하의 예가 나를 위해 그것을 명확히했습니다. 감사합니다
Manuel Hernandez

이것은 더 이상 사용되지 않으며 더 이상 사용할 수 없습니다this.options
Trip

4
@ 여행 : 응? initialize: function(options) { ... }변경 사항은 Backbone이 더 이상 자동으로 설정되지 않는다는 this.options것입니다. "Backbone Views는 더 이상 생성자에 전달 된 옵션을로 자동 연결 this.options하지 않지만 원하는 경우 직접 수행 할 수 있습니다." .
뮤 너무 짧은

12

백본 1.1.0부터는 options인수가 더 이상 자동으로 첨부되지 않습니다 ( 토론을 위해 문제 2458 참조 ). 이제 각보기의 옵션을 수동으로 첨부해야합니다.

MenuView = Backbone.View.extend({
    initialize: function(options) {
        _.extend(this, _.pick(options, "position", ...));
    }
});

new MenuView({
    collection: itemColl,
    position: this.getPosition(),
    ...
});

또는 이 미니 플러그인 을 사용하여 다음 과 같이 화이트리스트 옵션을 자동 첨부 할 수 있습니다 .

MenuView = Backbone.View.extend({
    options : ["position", ...] // options.position will be copied to this.position
});

-1

다른 위치에서 지나가 다

 new MenuView({
   collection: itemColl,
   position: this.getPosition()
})

옵션 인수를 추가하여 전달 된 변수를 가져 오는 뷰에서 초기화합니다.

initialize: function(options) {
   // Deal with default options and then look at options.pos
   // ...
},

가치 사용을 얻으려면-

   var v = new ItemView({ pos: this.options.positions});

5
집합 적이 아닌 개선 된 답변을 작성하십시오.
Konga Raju 2012

이것은 개선 된 답변입니다!
Imtiaz Mirza 2015

-2

this.options 를 사용 하여보기에서 인수자 를 검색합니다.

 // Place holder
 <div class="contentName"></div>

 var showNameView = Backbone.View.extend({
        el:'.contentName',
        initialize: function(){
            // Get name value by this.options.name
            this.render(this.options.name);
        },
        render: function(name){
            $('.contentName').html(name);
        }
    });

    $(document).ready(function(){
        // Passing name as argument to view
        var myName1 = new showNameView({name: 'Nishant'});
    });

작동 예 : http://jsfiddle.net/Cpn3g/1771/

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.