Cách truy cập chế độ xem tổng hợp từ thể hiện chế độ xem mục trong Backbone Marionette

Question

Tình huống cơ bản là:

Tôi có Chế độ xem tổng hợp và Chế độ xem mục. Tôi xây dựng khung nhìn Composite đi qua nó một mô hình và một bộ sưu tập. Dữ liệu mô hình được sử dụng để điền mẫu cho chế độ xem Tổng hợp. Dữ liệu thu thập được sử dụng để điền Chế độ xem mục cho Chế độ xem tổng hợp.

Điều tôi muốn làm là: trong trình trợ giúp mẫu cho chế độ xem Mục tôi muốn truy cập dữ liệu mô hình cho Chế độ xem tổng hợp. Tôi đã truy cập vào trường hợp xem của Item View. Tôi nghĩ rằng có thể cho tôi một xử lý trên Composite Xem, từ nơi tôi có thể nhận được để mô hình của nó, nhưng nó không.

Có cách nào tôi có thể thực hiện việc này không - truy cập cá thể chế độ xem tổng hợp từ một trong các trường hợp chế độ xem mục của nó?

Cảm ơn

--Justin Wyllie

Answer 1

Nếu bạn muốn truy cập dữ liệu từ phụ huynh CompositeView, bạn có thể thực hiện một số việc khác nhau.

1. Hoặc truyền dữ liệu trực tiếp đến ItemView thông qua chức năng itemViewOptions helper trên CompositeView. Lưu ý: Tùy chọn này đã thay đổi thành childViewOptions trong Marionette 2.

2. Gọi phương thức trực tiếp trên tất cả chế độ xem trẻ em từ CompositeView và chuyển bất kỳ thứ gì bạn muốn vào phương thức đó.

3. Kích hoạt sự kiện trên hoặc được nghe theo số ItemView.

Không có tùy chọn nào trong số này trực tiếp truy cập chế độ xem gốc từ trẻ nhưng phải làm những gì bạn muốn. Dưới đây là mã cho cách sử dụng từng phương pháp này để chuyển mô hình của CompositeView đến chế độ xem trẻ em.

// Pass model into ItemView on init 
var MyItemView = Backbone.Marionette.ItemView.extend({ 
    initialize : function (options) { 
    this.parentsModel = options.parentsModel; 
    } 
}); 
var MyCompView = Backbone.Marionette.CompositeView.extend({ 
    itemViewOptions : function() { return { parentsModel: this.model }; } 
    itemView : MyItemView 
}); 


// Invoke function on ItemView, passing data in 
var MyItemView = Backbone.Marionette.ItemView.extend({ 
    doSomethingWithParent : function (parentModel) { 
    // do cool thing with parentModel 
    } 
}); 
var MyCompView = Backbone.Marionette.CompositeView.extend({ 
    itemView : MyItemView, 
    onRender : function() { 
    this.children.call("doSomethingWithParent", this.model); 
    } 
}); 


// Trigger event that ItemView knows about 
var MyItemView = Backbone.Marionette.ItemView.extend({ 
    initialize : function() { 
    this.listenTo(this, "special:event", function (parentModel) { 
     // Do cool things 
    }); 
    } 
}); 
var MyCompView = Backbone.Marionette.CompositeView.extend({ 
    itemView : MyItemView, 
    onRender : function() { 
    this.children.each(_.bind(function (childView) { 
     childView.trigger("special:event", this.model); 
    }, this)); 
    } 
}); 

Answer 2

Tôi không trả lời câu hỏi. Nhưng thay đổi cách tiếp cận hoạt động. Thay vì cố gắng truy cập vào 'mẹ' composite Xem từ Item Xem tôi truy cập vào các mục Xem từ Composite Xem:

https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#onbeforeitemadded-callback

tôi có thể sửa đổi các mô hình của các quan điểm mục hiện hành (dựa trên một giá trị trong mô hình của Composite View).

Answer 3

Tôi nên chia sẻ cách đề xuất của Andrew Hubbs đã giúp tôi. Tôi đã cố gắng để hiển thị một thuộc tính mô hình cha mẹ nội tuyến với mẫu mục của tôi. Tôi sử dụng mẫu của MarionetteHelpers tài sản để làm điều này kết hợp với một trong những đề xuất của Andrew.

tôi đã cố gắng để giữ cho các ví dụ ngắn gọn:

Ví dụ composite mẫu - MyView mẫu:

<h1>Page {{name}}</h1> 
<h6>Children</h6> 
<ul></ul> 

Ví dụ mục mẫu - myItemTemplate:

{{name}} is child of: {{getParentName}} 

Xem:

App.module('App.View', function(View){ 

    View.MyItemView = Marionette.ItemView.extend({ 

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

     template: myItemTemplate, 

     tagName: 'li', 

     templateHelpers: function() { 

      var view = this; 

      return { 
       // Called by item template, returns parent model 'name' property. 
       getParentName: function() { 
        return view.parentModel.get('name'); 
       } 

      }; 
     } 

    }); 

    View.MyView = Marionette.CompositeView.extend({ 

     template: myViewTemplate, 

     itemView: View.MyItemView, 

     itemViewContainer: 'ul', 

     itemViewOptions: function() { 

      return { parentModel: this.model }; 

     } 

    }); 

}); 

Ví dụ về cách thực hiện điều này:

// example of how implementation 
// parent model has an attribute called 'children', which is a collection of models 
var children = parent.get('children'); 

var view = new App.View.MyView({ model: parent, collection: children }); 

App.mainRegion.show(view);