Bindings with external kinds

I'm having a hard time getting my bindings to work with external kinds. To clarify, by external, that can mean, adjacent in scope, a parent, a child, really anything but itself.

I have a Model fetch() that binds data to parts of a kind and I want one or more of those also bound to the kind's parent.

Based off of what the docs say:
Note that the source (from) and target (to) properties of the binding are specified as string paths. By convention, when the path starts with a dot (.) as in this example, the path is relative to this. If the path starts with a caret (^), the path is relative to the global scope.
It should be fairly straight forward, substituting the (.) for a (^) and referencing from the Global scope, but I guess I don't understand how to target something from the global scope and whether the (^) precedes a ($) or a (.) or what...

Does anyone have a succinct example of binding to a parent or any external kind?

Comments

  • I'm not sure I understand exactly what you mean, but maybe this will help:
    
        enyo.kind({
        name: "App",
        components: [
            {name: "input", kind: "enyo.Input"},
            {name: "output", content: "Replace me."}
        ],
        published: {
            text: ""
        },
        bindings: [
            {from: ".$.input.value", to: ".text"},
            {from: ".text", to: ".$.output.content"}
        ]
    
    });
    
    new App().renderInto(document.body);
    
    "input" and "output" are "external" to each other and their data is bound to their parent, "App". They can also bind directly to each other:
        bindings: [
            {from: ".$.input.value", to: ".$.output.content"}
        ]
    
  • edited June 2014
    I hope this will server to illustrate my question.

    Kind1 and Kind2 are children of App now.
    Kind1 has bindings as per your example, I've added a 3rd binding to reflect my issue.
    How can this 3rd binding bind to Kind2's 'toBindTo' property as it is what I see as an adjacent kind (on the same level) but encapsulated, and furthermore, how would a binding reach the parent App kind to the 'parentKind' p tag's content property...

    I hope this makes more sense.

    I'm trying to bind outside of the kind I'm making my Model fetch() call in and have other kind's properties kept in sync.

    enyo.kind({ name: "Kind1", components: [ {name: "input", kind: "enyo.Input"}, {name: "output", content: "Replace me."} ], published: { text: "" }, bindings: [ {from: ".$.input.value", to: ".text"}, {from: ".text", to: ".$.output.content"}, // how can this 3rd binding bind to Kind2's 'toBindTo''s content // or even its parent App's 'parentKind''s content {from: ".text", to: "^$.toBindTo.content"} ] }); enyo.kind({ name: "Kind2", components: [ {name: "toBindTo", content: ""}, ] }); enyo.kind({ name: "App", components: [ {name: "Kind1"}, {name: "Kind2"}, {name: "parentKind", tag:"p", content:""} ] }); new App().renderInto(document.body);
  • Give Kind2 a published property and bind it toBindTo's content and then have "App" bind to the new published property instead of trying to bind directly to a component within a component (which breaks encapsulation).

    jsfiddle.net/WpPeq/
    enyo.kind({
        name: "Kind1",
        components: [
            {name: "input", kind: "enyo.Input"},
            {name: "output", style: "background-color:yellow", content: "Replace me."}
        ],
        published: {
            text: ""
        },
        bindings: [
            {from: ".$.input.value", to: ".text"},
            {from: ".text", to: ".$.output.content"}
        ]
    });
    
    enyo.kind({
        name: "Kind2",
        components: [
            {name: "toBindTo", style: "background-color:gray", content: "Kind2 Content"},
        ],
        published: {
            text: ""
        },
        bindings: [
            {from: ".text", to: ".$.toBindTo.content"}
        ]
    });
    
    enyo.kind({
        name: "App",
        components: [
            {name: "k1", kind: "Kind1"},
            {name: "k2", kind: "Kind2"},
            {name: "parentKind", style: "background-color:pink", tag:"p", content:""}
        ],
        
        bindings: [
            {from: ".$.k1.text", to: ".$.k2.text"},
            {from: ".$.k1.text", to: ".$.parentKind.content"},
        ]
    });
    
    new App().renderInto(document.body);
    
  • edited June 2014
    Edit: The existing example for the (^) global path doesn't seem to work anymore. I'll work on coming up with a new one.
  • Finally had a chance to implement this, works well, thank you!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!