html http://stackoverflow.com/questions/40976125/linking-directly-to-both-parentchild-views-controll

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html http://stackoverflow.com/questions/40976125/linking-directly-to-both-parentchild-views-controll相关的知识，希望对你有一定的参考价值。

export class SharedState {
  fromdate = '';
  todate = '';
  language = 'English';
}

import {inject, NewInstance} from 'aurelia-framework';
import {SharedState} from './shared-state';

@inject(NewInstance.of(SharedState)) // <-- this says create a new instance of the SharedState whenever a SharedParent2 instance is created
export class SharedParent2 {
  constructor(state) {
    this.state = state;
  }

  configureRouter(config, router){
    config.title = 'Aurelia';
    config.map([
        { route: ['', 'child-a'], moduleId: './child-a', nav: true, title: 'Child A' },
        { route: 'child-b', moduleId: './child-b', nav: true, title: 'Child B' },
    ]);

    this.router = router;
  }
}

<template>
  <div class="shared-parent">
    <h1>Shared Parent 2</h1>
  
    <form>
      <label>Language: <input type="text" value.bind="state.language"></label>
      <label>From Date: <input type="date" value.bind="state.fromdate"></label>
      <label>To Date: <input type="date" value.bind="state.todate"></label>
    </form>
    
    <router-view></router-view>
  </div>
</template>

import {inject, NewInstance} from 'aurelia-framework';
import {SharedState} from './shared-state';

@inject(NewInstance.of(SharedState)) // <-- this says create a new instance of the SharedState whenever a SharedParent instance is created
export class SharedParent {
  constructor(state) {
    this.state = state;
  }
  
  configureRouter(config, router){
    config.title = 'Aurelia';
    config.map([
        { route: ['', 'child-a'], moduleId: './child-a', nav: true, title: 'Child A' },
        { route: 'child-b', moduleId: './child-b', nav: true, title: 'Child B' },
    ]);

    this.router = router;
  }
}

<template>
  <div class="shared-parent">
    <h1>Shared Parent</h1>
  
    <form>
      <label>Language: <input type="text" value.bind="state.language"></label>
      <label>From Date: <input type="date" value.bind="state.fromdate"></label>
      <label>To Date: <input type="date" value.bind="state.todate"></label>
    </form>
    
    <router-view></router-view>
  </div>
</template>

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .shared-parent,
      .shared-parent > form {
        border: 5px solid green;
        padding: 10px;
      }
      .shared-parent > form {
        width: 50%;
      }
      
      .child {
        border: 5px solid blue;
        margin-top: 10px;
        padding: 10px;
      }
    </style>
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>
    
    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

import {inject} from 'aurelia-framework';
import {SharedState} from './shared-state';

@inject(SharedState)
export class ChildB {
  constructor(state) {
    this.state = state;
  }
}

<template>
  <div class="child">
    <h2>Child B</h2>
    Language: ${state.language}, Dates: ${state.fromdate || '???'} - ${state.todate || '???'}
  </div>
</template>

import {inject} from 'aurelia-framework';
import {SharedState} from './shared-state';

@inject(SharedState)
export class ChildA {
  constructor(state) {
    this.state = state;
  }
}

<template>
  <div class="child">
    <h2>Child A</h2>
    Language: ${state.language}, Dates: ${state.fromdate || '???'} - ${state.todate || '???'}
  </div>
</template>

export class App {
  message = 'Hello World!';
  
  configureRouter(config, router){
    config.title = 'Aurelia';
    config.map([
        { route: ['', 'shared-parent'], moduleId: './shared-parent', nav: true, title: 'Shared Parent' },
        { route: 'shared-parent2', moduleId: './shared-parent2', nav: true, title: 'Shared Parent 2' },
    ]);

    this.router = router;
  }
}

<template>
  <ul>
    <li><a href="#shared-parent/child-a">#shared-parent/child-a</a></li>
    <li><a href="#shared-parent/child-b">#shared-parent/child-b</a></li>
    <li><a href="#shared-parent2/child-a">#shared-parent2/child-a</a></li>
    <li><a href="#shared-parent2/child-b">#shared-parent2/child-b</a></li>
  </ul>
  <router-view></router-view>
</template>

以上是关于html http://stackoverflow.com/questions/40976125/linking-directly-to-both-parentchild-views-controll的主要内容，如果未能解决你的问题，请参考以下文章

html 基于IP的城市动态文本替换（也可用于区域，国家，IP）。文档：http：//stackoverflow.com/questions

html Bootstrap 3子菜单 - http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-mis

html 提交后禁用按钮http://stackoverflow.com/questions/13606573/disable-button-after-submit-with-jquery

html Bootstrap 3子菜单 - http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-mis

csharp 来自http://stackoverflow.com/questions/286813/how-do-you-convert-html-to-plain-text