title: Is there a way to seperate templates and view models completely with knockout?
body: <p>What I am looking for is to have a way of implementing a template where the template only knows an interface of a view model.</p>
  
  <p>Let's say that I have a view called Greetings. It knows that it can communicate with an interface called IGreetingsVM.</p>
  
  <p>The IGreetingsVM can look something like:</p>
  
  <pre><code>interface IGreetingsVM {
      greetings: KnockoutObservable&lt;string&gt;;
  }
  </code></pre>
  
  <p>In the actual view model I implement the interface:</p>
  
  <pre><code>class GreetingsVMImpl implements IGreetingsVM {
      greetings: KnockoutObservable&lt;string&gt;;
  
      constructor() {
          this.greetings("Hello world");
      }
  }
  </code></pre>
  
  <p>Since the template knows it got an IGreetingsVM, it also knows that it can call greetings, so:</p>
  
  <pre><code>&lt;p data-bind="text: greetings"&gt;&lt;/p&gt;
  </code></pre>
  
  <p>In this way, I can separate the whole view from an actual view model implementation.</p>
  
  <p>However, in most examples I've seen, they usually say that this template must have this viewmodel implementation.</p>
  
  <p>This can be achieved in example Java where you have a code behind file for each form you create where you can have a get and set method for the view model.</p>
  
  <p>Example:</p>
  
  <pre><code>public class Greeter extends JPanel {
      public static final string PROP_VIEWMODEL = "viewModel";
  
      private IGreetingsVM viewModel;
      private JLabel greetingLabel;
      private BindingGroup bindingGroup;
  
      public Greeter() {
          initComponents();
      }
  
      public void setViewModel(IGreetingsVM viewModel) {
          IGreetingsVM oldViewModel = this.viewModel;
          this.viewModel = viewModel;
          propertyChangeSupport.firePropertyChange(PROP_VIEWMODEL, oldViewModel, viewModel);
      }
  
      public IGreetingsVM getViewModel() {
          return this.viewModel;
      }
  
      private void initComponents() {
          bindingGroup = new BindingGroup();
  
          greetingLabel = new JLabel();
  
          Binding binding = Bindings.createAutoBinding(
              AutoBinding.UpdateStrategy.READ_WRITE, 
              this,
              ELProperty.create("${viewModel.greetings}"), 
              greetingLabel,
              BeanProperty.create("text"));
  
          // similar to knockout where bindings auto update components.
          bindingGroup.addBinding(binding);
      }
  }
  </code></pre>
  
  <p>Is there a way to achieve ^ in javascript, maybe preferably with knockout?</p>