Databases
StackOverflow2013
Postsdbo
POHow to access the data context's observable from inside a knockoutjs template
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to access the data context's observable from inside a knockoutjs template
    primarykey
    data
    text
    <p>I need to access the entire observable data context from a knockout template, not just it's value.</p> <p>In the application I'm developing, I often have a lot of meta data that I use to help render views generically. In the past, I've made the view model properties complex - storing both the meta data and data as sub properties (with values in a value property):</p> <pre><code>ViewModel.AwesomeProperty = { value: ko.observable('Awesome Value'), label: 'My Awesome Label', template: 'awesomeTemplate', otherMetaData: 'etc' } </code></pre> <p>I'm changing this meta data to become properties of the observables (as I believe Ryan Niemeyer described in one of his blog posts or sessions). I find it to be cleaner, more elegant, and generally more maintainable with less overhead (particularly when it comes to serialization). The equivalent to the above example would be as follows:</p> <pre><code>ViewModel.AwesomeProperty = ko.observable('Awesome Value'); ViewModel.AwesomeProperty.label = 'My Awesome Label'; ViewModel.AwesomeProperty.template = 'awesomeTemplate'; ViewModel.AwesomeProperty.otherMetaData = 'etc'; </code></pre> <p>The side effect of doing this is that passing ViewModel.AwesomeProperty to a template sets the data context to the value of the observable (in this case 'Awesome Value'), making the metadata inaccessible from $data:</p> <pre><code>&lt;script id="example" type="text/html"&gt; &lt;!-- This won't work anymore --&gt; &lt;span data-bind="text: $data.label&gt;&lt;/span&gt; &lt;/script&gt; &lt;div data-bind="template: {name: 'example', data: AwesomeProperty}"&gt;&lt;/div&gt; </code></pre> <p>The workaround I have now is to wrap the data value in an anonymous object like so:</p> <pre><code>&lt;script id="example" type="text/html"&gt; &lt;!-- Now it works again --&gt; &lt;span data-bind="text: data.label&gt;&lt;/span&gt; &lt;/script&gt; &lt;div data-bind="template: {name: 'example', data: {data:AwesomeProperty}}"&gt;&lt;/div&gt; </code></pre> <p>But this is inelegant and not ideal. In a case where there's a lot of auto-generation, this is not only inconvenient, but is actually a major roadblock. I've considered making a custom binding to wrap the template binding, but I'm hoping there's a better solution.</p> <p>Here's a real world example I've been working for cascading drop downs. <a href="http://jsfiddle.net/daedalus28/UFVYg/7/" rel="nofollow">This JSFiddle</a> works, but <a href="http://jsfiddle.net/daedalus28/UFVYg/8/" rel="nofollow">that JSFiddle</a> doesn't.</p> <p>Thanks in advance.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USdaedalus28
    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
    1. VO
      singulars
      1. POHow to access the data context's observable from inside a knockoutjs template
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to access the data context's observable from inside a knockoutjs template
      1. USantishok
      1. VTFavorite
    3. VO
      singulars
      1. POHow to access the data context's observable from inside a knockoutjs template
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

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