HTML

gistfile1.txt

<div type='text/stache' can-autorender>

    <x-entnahmestelle-details>
        <div class="card-header">
            <x-test vm:bar:from="bar"></x-test>
        </div>
        <div class="card-body">
            <x-entnahmestelle-tab-content entnahmestelle-id="1" vm:entnahmestelleId:to="bar"></x-entnahmestelle-tab-content>
        </div>
    </x-entnahmestelle-details>

</div>

test.js

import "can-stache-bindings";
import Component from "can-component";
import DefineMap from "can-define/map/";

import view from "./test.stache";

const ViewModel = DefineMap.extend("Entnahmestelle-Tab-VM", {
  detailPromise: {
    type: "*"
  },
  bar: {
    type: "string"
  }
});

Component.extend({
  tag: "x-test",
  ViewModel,
  view,
  events: {}
});

test.stache

{{bar}}

x-entnahmestelle-details.js

import "can-stache-bindings";
import Component from "can-component";
import DefineMap from "can-define/map/";
import stache from "can-stache";

import view from "./entnahmestelle-details.stache";

const ViewModel = DefineMap.extend("Entnahmestelle-Tab-VM", {
  bar: {
    type: "string"
  }
});

Component.extend({
  tag: "x-entnahmestelle-details",
  ViewModel,
  view: stache("<content>"),
  events: {}
});

x-entnahmestelle-tab-content.js

import "can-stache-bindings";
import $ from "jquery";
import Component from "can-component";
import DefineMap from "can-define/map/";

import view from "./entnahmestelle-tab-content.stache";
import EntnahmestelleDetail from "~/models/entnahmestelle/detail";


const ViewModel = DefineMap.extend("Entnahmestelle-Tab-VM", {
  entnahmestelleId: {
    set: (newVal) => {
      if(!isNaN(parseInt(newVal, 10))) {
        console.log(newVal);
        return newVal;
      }
    }
  },
  detailPromise: {
    get: function() {
      if(!isNaN(parseInt(this.entnahmestelleId, 10))) {
        return EntnahmestelleDetail.get({"wwentnahmestelle_id": this.entnahmestelleId});
      }
    }
  }
});

Component.extend({
  tag: "x-entnahmestelle-tab-content",
  ViewModel,
  view,
  events: {
    "inserted": () => {
      $("#entnahmestelle-tab a").on("click", function (e) {
        e.preventDefault();
        $(this).tab("show");
      });
    }
  }
});