CODEWITHSUNDEEP
knockout.jsknockout-2.0
Anil Gupta
Anil Gupta

Reputation: 2399

knockout how to get Parent Object in with binding

my click bind is not calling fullName funciton what is right way to call this ??

<div>
    <div data-bind="with: test.name" >
        <div>
        <span data-bind="text:firstName"></span>
        <span data-bind="text:firstName"></span>
        <br />
        <div>
        <span data-bind="click: $parent.fullName">FullName</span>
    </div>
</div>

modal = function(){
    var firstName = ko.observable('jhon'),
        lastName = ko.observable('deo'),
        test = {
            name : {
              firstName: firstName,
              lastName: lastName
           },
            fullName : function(){
                alert(name.firstName() + name.lastName());
            }
        };

    return {
        test: test
    }
}();

ko.applyBindings(modal);

Upvotes: 0

Views: 2742

Answers (2)

Grim
Grim

Reputation: 1638

The $parent meta-attribute refer to the binding immediately above in your binding hierarchy, not to the parent object in your view model. Since your with is in the main binding context, the $parent refers to the root view model.

If you need to access menu you can either nest it within another binding:

<div data-bind="with: test">
  <div data-bind="with: name">
  [...]
    <button data-bind="click: $parent.fullName">Click</button>
  </div>
</div>

or qualifify your call starting from the parent binding (modal or root binding in your example):

<button data-bind="click: $parent.test.fullName">Click</button>

A bit of clarification regarding the binding context vs model hierarchy:

with your original binding when you apply the with: test.name binding, the binding context will looke like:

<body> <!-- binding context: [modal] -->
  <div data-bind="with: test.name"> <!-- binding context: [modal|test.name] -->

conversely, when applying the nested binding shown above the hierarchy changes to:

<body> <!-- bc: [modal] -->
  <div data-bind="with: test"> <!-- bc: [modal|test] -->
    <div data-bind="with: name"> <!-- bc: [modal|test|name] -->

Upvotes: 1

aaberg
aaberg

Reputation: 2273

Your click event should look like this:

<span data-bind="click: $parent.test.fullName">FullName</span>

I have updated you fiddle

Upvotes: 0

Related Questions