Dynamic binding

[HackerTree]

Hi all,

I'm looking for a way if exist to make a kind of dynamic binding, for example:

<!-- CodeMirror id='codemirror' code={{editor.code}}/ -->
<!-- CodeMirror id='codemirror' code={{components.root.code}}/ -->
<CodeMirror id='codemirror' code={{components.${component.selected}.code}}/>

with this data:

data: function () {
  return {
    readme: {
      code: '# Welcome'
    },
    components: {
      root: {code: '// TODO...'}
    },
    component: {
      selected: 'root'
    },
    templates: [],
    editor: {
      code: '// TODO test...',
      mode: 'javascript'
    },
    show: {
      CodeMirror: false,
      Root: false,
      SimpleMDE: true
    }
  };
},

[Chris Reeves]

I believe this is what you're after: components[component.selected].code - what Ractive calls a reference expression. The path updates with its components. Note that it only works in templates, so you can't use it with API calls.

--
You received this message because you are subscribed to the Google Groups "Ractive.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ractive-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[HackerTree]

So probably the best way to bind the data is using Observers, when editor.code changes, using editor.keypath is possible to update components.root.code or templates.root-tpl.code:

components: {
  root: {code: '// TODO', isRoot: true}
},
templates: {
  'root-tpl': {code: '<!-- TODO -->'}
},
editor: {
  code: null,
  mode: null,
  keypath: null
},

To unsubscribe from this group and stop receiving emails from it, send an email to ractive-js+...@googlegroups.com.