Question

我有一个名为selector

的基本组件

<template>
    <span> this is common for all selectors </span>
      <div>
        <content>
        </content
      </div>
</template>

import {transient} from "aurelia-framework"; 

@transient() 
export class Selector { 
  constructor(){ 
    console.log("selector called"); 
  } 
}

我有SelectorBase类

@transient() 

export class SelectorBase { 
    @bindable({ name: 'myProp', defaultBindingMode: bindingMode.twoWay }) myProp = null;
    constructor() { 
      console.log("selector base called"); 
    } 
}

和2个派生组件，称为SelectorA和SelectorB。这是一个例子

<template>
  <div>
    This is selector A
  </div>
</template>

import {SelectorBase} from "./selectorBase"; 
import { transient} from "aurelia-framework";

@transient() 
export class SelectorA extends SelectorBase{ 
  constructor() { 
    super(); 
    console.log("selector A called"); 
  } 
}

我对选择器B也有同样的看法。

我不是从Selector派生而是从SelectorBase派生。所以我的SelectorA和SelectorB组件嵌入在Selector组件

中

我在我的观点中使用它

<require from="./../../selector"></require>
<require from="./../../selectorA"></require>

<selector>
  <selector-a></selector-a>
</selector>

当我打开我的第一个具有selectorA的视图时，它可以正常工作（正在调用SelectorBase和SelectorA构造函数），但是当我打开一个具有选择器B的不同视图时，不显示内容部分（仅来自基本选择器的html）。调用SelectorBase构造函数但不调用SelectorB构造函数

我必须提一下，当我导航回第一个视图时，一切正常（SelectorBase和SelectorA构造函数按预期调用）

我无法找到我做错的事。

修改我认为SelectorBase上的可绑定属性导致了这个问题。不知道为什么。

谢谢

Answer 1

回答我自己的问题，因为我怀疑问题是基类中的可绑定属性。我从SelectorBase类中删除了可绑定属性，并创建了一个装饰器，用于创建常见的可绑定属性，并将该装饰器添加到派生类中。

var str = 'hello123';
var firstPart=str.substr(0,str.length/2);
var secondPart=str.substr(str.length/2);

我在我的派生选择器中使用它

import {BindableProperty, HtmlBehaviorResource} from 'aurelia-templating';
import {metadata} from 'aurelia-metadata';
import {bindingMode} from 'aurelia-binding';


export function generateSelectorBindables(): any {
    return function (target: Function, key: string, descriptor: any) : void {
        // get or create the HtmlBehaviorResource
        // on which we're going to create the BindableProperty's

        let behaviorResource = <HtmlBehaviorResource>metadata.getOrCreateOwn(metadata.resource, HtmlBehaviorResource, target, key);

        let myProp = new BindableProperty({ name: 'myBindableProperty', defaultBindingMode: bindingMode.twoWay });
        myProp .registerWith(target, behaviorResource, descriptor);

        };
}

Aurelia组件中的自定义组件

1 个答案: