entnahmestelle-list.js

import {Component, DefineMap} from "can";

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

const ViewModel = DefineMap.extend("ListVM", {
  msg: {
    default: "foo"
  }
});

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

html

<x-import>
    <div class="container-fluid px-0">
        <div class="row">
            <div class="col-3">
                <x-entnahmestelle-list vm:msg:to="bar"></x-entnahmestelle-list>
            </div>
            <div class="col">
                {{bar}}
            </div>
    </div>
    <div class="form-group row justify-content-end">
        <div class="col-4 text-right form-controls">
            <button type="submit" class="btn btn-success" role="button"><i class="fa fa-save"></i> Speichern</button>
            <button class="btn btn-secondary" role="back">Abbrechen</button>
        </div>
    </div>
</x-import>

import.js

import {Component, DefineMap} from "can";
import "~/components/entnahmestelle-list/";

const ViewModel = DefineMap.extend("ImportVM", {
  bar: "string"
});

Component.extend({
  tag: "x-import",
  ViewModel,
  view: `<content/>`,
  events: {}
});