2016-07-20 3 views
1

백본 js를 읽는 데 새로운 사람이고 에 심각한 문제가 있습니다.인수을 백본 js에 전달합니다. 당신은 내가이 기능이 볼 수백본 js 전달 인수

var Song = Backbone.Model.extend(); 
var Songs = Backbone.Collection.extend({ 
    model: Song 
}); 
var SongView = Backbone.View.extend({ 
    el: "li", 
    render: function() { 
    this.$el.html(this.model.get("title")); 
    return this; 
    } 
}); 
var SongsView = Backbone.View.extend({ 
    el: "ul", 
    initialize: function() { 
    this.model.on("add", this.onSongAdded, this); 
    }, 
    onSongAdded: function(song) { // when object is added to a collection add event is triggerd 
    // the handler for this event get an argument which is the object that was just added 
    //in this case it refers to a song model so we simply pass it to our songView which is responsible for rendering a song an then we use jquery append method 
    // to append it to our list 
    var songView = new SongView({ 
     model: Song 
    }); 
    this.$el.append(songView.render().$el); 

    }, 
    render: function() { 
    var self = this; 
    this.model.each(function(song) { // 
     var songView = new SongView({ 
     model: Song 
     }); 
     self.$el.append(songView.render().$el); 
    }); 
    } 
}); 
var songs = new Songs([ 
    new Song({ 
    title: "1" 
    }), 
    new Song({ 
    title: "2" 
    }), 
    new Song({ 
    title: "3" 
    }) 
]); 
var song_1 = new Song({ 
    title: "hello" 
}); 
var songsView = new SongsView({ 
    el: "#songs", 
    model: Songs 
}); 
songsView.render(); 

: 이 onSongAdded 일부 내장과 같이 3 개 인수를 얻을 같은 추가 등의 이벤트 우리는이 : 추가 (컬렉션, 모델, 옵션) 내가 어떻게 할 수 내 코드에서이 인수를 사용합니까? 나를 도와 줄 수 있습니까?

답변

0

el 옵션은 이미 DOM에있는 요소를 뷰로 가리키는 데 사용됩니다. 상품보기는 새로운 <li> 요소를 만들어야하므로 대신 tagName 옵션을 사용해야합니다.

컬렉션보기 생성자에서 el 옵션을 정의했으며 인스턴스화 중에 다른 el 옵션을 전달하고 있습니다. #songs이 DOM에 <uL> 인 경우 생성자에 el: "ul",을 정의하는 데 사용하지 않습니다.

또한 모델을 수동으로 인스턴스화 할 필요가 없습니다. 개체를 컬렉션에 전달하면 컬렉션에서 내부적으로 처리 할 수 ​​있습니다. 컬렉션을 model으로 전달하지 않으려면 collection으로 전달하십시오.

+0

감사합니다. –