CODEWITHSUNDEEP
javascriptknockout.js
user2142786
user2142786

Reputation: 1482

Visible binding is not working in knockout js

In my code i am pushing an object on click of Add button which display an input field an d apply button. on click of apply button i write a function through which i am displaying my text and show field button. but i am getting an error "show is not defined" here is my function 

self.apply = function () {
    self.show(false);
    self.showFields(true);
};

addterm is here 

self.addTerm = function () {
    var term = new Term("12");
    self.Terms.push(term);
    self.show(true);
    self.showFields(false);
};

Here is JS Fiddle Link

Upvotes: 0

Views: 304

Answers (2)

Muhammad Raheel
Muhammad Raheel

Reputation: 19882

You need to add parent keyword.

<button class="button addNewButton" data-bind="click: $root.addTerm">Add a new Term for Loan</button>
<table class="termGrid">
<thead>
    <tr>
        <th class="headRow headColumn">
            Term
        </th>
        <th class="headRow tools">
        </th>
    </tr>
</thead>
<tbody data-bind="foreach: Terms">
    <tr class="row">
      <td class="tools">

            <input type="text" class="edit" data-bind="value: loanterm, visible: $parent.show"  />
            <strong class="read" data-bind="text: loanterm, visible: $parent.showFields" ></strong>
            <a class="button toolButton" href="#" data-bind="visible: $parent.showFields" >show Tiers</a> 
             <a class="button toolButton" href="#" data-bind="click: $root.apply,visible:$parent.show" >Apply</a> 

        </td>
    </tr>
</tbody>

fiddle demo

Upvotes: 1

haim770
haim770

Reputation: 49095

When you iterate over your Terms using:

<tbody data-bind="foreach: Terms">

The scope inside the tbody becomes the current Term you're iterating over. So when you write:

<input type="text" class="edit" data-bind="value: loanterm, visible: show"  />

Knockout is looking for Term.show which obviously doesn't exists. So you need to point Knockout to the root ViewModel using the $root keyword:

<input type="text" class="edit" data-bind="value: loanterm, visible: $root.show"  />

(Same goes for your showFields property)

See Binding-Context

Upvotes: 1

Related Questions