在父视图中触发子视图模型方法：MarionetteJs

Question

我有一个 Marionette 视图 SingleCategoryView，它接受一个集合并呈现一个集合视图 optionsView。 optionsView 是一个itemView optionView 的列表。在我的 SingleCategory 视图中，我必须对渲染进行测试

 "onRender": function() 
 {
   if(optionsView.hasOnlyExtraOption(optionsView.collection.models)) {
   var noResultsAvailableMsg = 
   this.model.getLocalisationModel().getNoResultsAvailableMsg(); 

   var myModel = new noResultsAvailableModel({noResultsAvailableMsg: 
   "noResultsAvailableMsg"});
   this.conflictMessageRegion.show(new noResultsAvailableView({ 'model' : 
   myModel}))} 
 }

这是位于 optionsView 文件中的 hasOnlyExtraOptions 的代码

"hasOnlyExtraOption": function(data) {
    return data.every(function(currentValue) {
        return 
         currentValue.get(
         MODEL_VIEW_CONSTANTS.ctaDisplayConflicted.selectors.cfgExtraOptions
          ListItem) || 
           currentValue.get(
        MODEL_VIEW_CONSTANTS.ctaDisplayConflicted.properties.isExtraOption);
                });

            }

我的问题是当我进行测试时即使 singleCategory 呈现 css class ( isExtraOption cfgExtraOptionslistItem ) 尚未设置，因此测试结果未定义。实际上这些 css class 是由此处的 optionViewModel 设置的：

"onConfigurationStepsComplete": function() {
 // some code 
  this.setIsExtraOption();
  //some code }

更明确地说：optionView 有父 optionsView，有 singleCategoryView 作为父。我的目标是通过 singleCategoryView 的 optionViewModel 触发属性 isExtraoption 的更改。

提前谢谢你。

Answer 1

您可以对集合视图和项目视图使用 child event bubbling。即获取配置后从子视图触发方法，并依次在父视图中执行代码。例如，在子视图中：

// optionView
doSomething() {
   this.triggerMethod('did:something', this);
}

您可以在父视图中收听此内容，例如：

 // optionsView
 onChildviewDidSomething(childView) {
    console.log('Something was done to ' + childView);
 }

以上将传播事件，直到 optionsView 在您的情况下。然后，您可以使用正常的 trigger and listen 机制将其向上传播。

例如，从 optionsView 触发另一个事件，例如：

// optionsView
onChildviewDidSomething(childView) {
    console.log('Something was done to ' + childView);
    this.triggerMethod('collectionview:did:something', this);
 }

并且您可以从父视图收听此事件，在您的情况下是 singleCategoryView，类似于：

// singleCategoryView
this.optionsView.on('collectionview:did:something', this.handler);

在父视图中触发子视图模型方法：MarionetteJs

Trigger a child view model method in the parent view : MarionetteJs

javascript

triggers

backbone.js

marionette