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.