Databases
StackOverflow2013
Postsdbo
POKnockout.js multiple external templates & multiple VM switching fails
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKnockout.js multiple external templates & multiple VM switching fails
    primarykey
    data
    text
    <p>I'm using the following:</p> <ul> <li>knockout-2.1.0.js</li> <li><a href="https://github.com/ifandelse/Knockout.js-External-Template-Engine" rel="noreferrer">koExternalTemplateEngine_all.js</a></li> </ul> <p>What I'm trying to achieve is the following:</p> <ul> <li>Template container loads external HTML and loads a specific VM for that HTML (works).</li> <li>Template container loads/switches to another external HTML, alongside with the other specific VM for that HTML (works).</li> <li>Template container switches back to the first template/VM, alongside with their VM (doesn't work!).</li> </ul> <p>I'm guessing the reason it doesn't work, is because the Template is loaded before the VM (it does give me binding errors).</p> <p>The structure of my site is as like this (excl. the libraries stated above):</p> <ul> <li><code>index.html</code> (Holds the template container)</li> <li><code>js/script.js</code> (Holds the main ViewModel)</li> <li><code>js/firstvm.js</code> (Holds the first ViewModel)</li> <li><code>js/secondvm.js</code> (Holds the second ViewModel)</li> <li><code>tmpl/firstvm.html</code> (Template for the first VM)</li> <li><code>tmpl/secondvm.html</code> (Template for the second VM)</li> </ul> <p><strong><a href="https://www.dropbox.com/s/y9tdo8zs5g9rdr5/external_template.zip" rel="noreferrer">Or simply download the source and view the problem.</a></strong></p> <p>Most important parts:</p> <ul> <li><p>index.html</p> <pre><code>&lt;button data-bind="click: loadFirstPage"&gt;Load first page + ViewModel&lt;/button&gt; &lt;button data-bind="click: loadSecondPage"&gt;Load second page + ViewModel&lt;/button&gt; &lt; hr /&gt; &lt;div data-bind="template: { name: function() { return currentTemplate(); }, data: currentData }"&gt;&lt;/div&gt; </code></pre></li> <li><p>script.js</p> <pre><code>function IndexViewModel() { var vm = this; this.currentTemplate = ko.observable(); this.currentData = ko.observable(); this.loadFirstPage = function() { vm.currentTemplate("firstvm"); vm.currentData(new FirstViewModel()); }; this.loadSecondPage = function() { vm.currentTemplate("secondvm"); vm.currentData(new SecondViewModel()); }; this.loadFirstPage(); }; ko.applyBindings(new IndexViewModel()); </code></pre></li> <li><p>firstvm.html</p> <pre><code>&lt;p data-bind="text: displayValue"&gt;&lt;/p&gt; </code></pre></li> <li><p>secondvm.html</p> <pre><code>&lt;p data-bind="text: displayValue2"&gt;&lt;/p&gt; </code></pre></li> <li><p>firstvm.js</p> <pre><code>function FirstViewModel() { this.displayValue = ko.observable("Text from firstvm.js"); }; </code></pre></li> <li><p>secondvm.js</p> <pre><code>function SecondViewModel() { this.displayValue2 = ko.observable("Text from secondvm.js"); }; </code></pre></li> </ul> <p>I hope somebody can help me out with this one. Thanks in advance!</p> <p>Ps. Forgot to mention: When the "First page" button is pressed <strong>twice</strong>, it does seem to work (probably since the correct VM is loaded).</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USMarcoK
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POKnockout.js multiple external templates & multiple VM switching fails
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POKnockout.js multiple external templates & multiple VM switching fails
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POKnockout.js multiple external templates & multiple VM switching fails
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHave you tried changing your template: {name: } binding to bind directly to a computed or observable rather than a function? ko should auto eval the changes in that case.
      singulars
      1. POKnockout.js multiple external templates & multiple VM switching fails
      1. USNick Nieslanik
    2. CO@Nick Yup. Sadly, that doesn't work..
      singulars
      1. POKnockout.js multiple external templates & multiple VM switching fails
      1. USMarcoK
    3. CO`data-bind="template: { name: currentTemplate, data: currentData }"` Works for me.
      singulars
      1. POKnockout.js multiple external templates & multiple VM switching fails
      1. USTyrsius
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload