백본을 사용하여 다중 응용 프로그램을 구성하는 방법은 무엇입니까?

Question

래퍼 또는 프레임 워크없이 깨끗한 백본을 사용합니다.

그래서 일부 제품에서 관리 할 사이트를 만듭니다.

• add.php
• edit.php

이 페이지는 별도의 백본 응용 프로그램입니다 :이 두 동적 페이지를 가지고있다.

두 페이지 모두 제품 범주를 표시하는 요소가 있습니다. 일반적으로 드롭 다운 목록입니다.

다음은 스크립트의 대략적인 구조를 설명합니다. 간단하다.

js 
+- models 
| +- Category.js 
| ... 
+- collections 
| +- Categories.js 
| ... 
+- views 
| +- CategoriesView.js 
| ... 

CategoryView.js가 포함

App.Views.CategoriesViews = Backbone.View.extend({ 
    template: _.template($('#tpl-categories').html()), 

    events: { 
     'change select': 'toggle' 
    }, 

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

     this.collection.on('reset', this.render); 
    }, 

    render: function() { 
     this.$el 
      .html(this.template({ collection: this.collection.toJSON() })); 

     return this; 
    }, 

    toggle: function() { 
     // Some actions here 
     var catId = this.$el.children('select').val(); 
     App.trigger('toggleCategories', catId); 
    } 

}); 

초기화 뷰의은 다음과 같습니다

new App.Views.CategoriesViews({ 
    el: $('#select-box-cats'), 
    collection: new App.Collections.Categories 
}); 

이 요소가 두 페이지에 있기 때문에 (은 add.php 및 edit.php) 둘 다 잘 작동합니다.

우리는 템플릿의 이름이 두 페이지에 동일하게 설정 될 수 있다고 가정 :

<script type="text/template" id="tpl-categories"> 

나는 그것이 좋은 방법이 아닙니다 생각하지만.

글쎄, 마침내 내 질문.

이러한 페이지 중 하나에서 이벤트 처리기를보기에 추가해야하는 경우 어떻게됩니까? 예 :

initialize: function() { 
    _.bindAll(this, 'render', 'action'); 

    this.collection.on('reset', this.render); 
    this.collection.on('request', this.action); 
}, 

이벤트를 request 컬렉션에 추가했습니다. 그러나 이 이벤트는 다른 페이지에 있어서는 안됩니다.

무엇을할까요? 페이지의 필요에 대한 변경 사항과 함께 별도의보기 파일을 만들려면 어떻게해야합니까? 그러나 DRY 원칙에 위배되며 많은 클라이언트 코드가 생성됩니다!

Answer 1

보기를 만들 때보기에 옵션을 전달할 수 있습니다.

new App.Views.CategoriesViews({ 
    el: $('#select-box-cats'), 
    collection: new App.Collections.Categories, 
    bindRequest: false, // Do not trigger the request event. 
    toggleCategories: false // Do not toggle categories in the toggle method. 
}); 

그리고 당신의보기 : 당신의 추가 페이지에서

new App.Views.CategoriesViews({ 
    el: $('#select-box-cats'), 
    collection: new App.Collections.Categories, 
    bindRequest: true, // Trigger the request event. 
    toggleCategories: true // Toggle the categories in the toggle method. 
}); 

: 당신의 편집 페이지에서

initialize: function() { 
    _.bindAll(this, 'render', 'action'); 

    this.collection.on('reset', this.render); 

    // this.options is automatically populated with any parameters included 
    // upon creation. 
    if (this.options.bindRequest) { 
     this.collection.on('request', this.action); 
    } 
}, 

toggle: function() { 
    // Some actions here 
    var catId = this.$el.children('select').val(); 

    // Options are available from any method in the view. 
    if (this.options.toggleCategories) { 
     App.trigger('toggleCategories', catId); 
    } 
} 

Answer 2

는 내가보기 어떤 컬렉션이 안 느낀다 특정 논리.그것이 수행해야하는 유일한 일은 해고 된 이벤트를 기반으로 뷰를 렌더링하는 것입니다.

는 그래서이 경우에 어떻게 할 것인지 모두 페이지에 대한 일반적인 하위 뷰

initialize: function() { 
    _.bindAll(this, 'render', 'action'); 

    this.collection.on('reset', this.render); 
}, 

에 공통 이벤트를 bind하는 것입니다.

그리고 뷰가 실제로 부모 뷰에서 인스턴스화 전에

..

AddView

initialize : function() { 
    this.collection = new App.Collections.Categories 
    this.collection.on('request', this.action); 
}, 
new App.Views.CategoriesViews({ 
    el: $('#select-box-cats'), 
    collection: this.collection 
});