Question

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

 "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类（isExtraOption cfgExtraOptionslistItem），因此测试结果不确定。实际上，这些CSS类是由optionViewModel设置的：

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

更明确的说：optionView作为父optionsView，witch具有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和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

1 个答案: