CODEWITHSUNDEEP
knockout.js
Shrabanee
Shrabanee

Reputation: 2766

How to use observable property of an observable array to change display property in UI?

this.inviteeEmailList = ko.observableArray([]);

this.status = ko.observable();

var emails = ["hello","test","obseervableArray"];

for(var j in emails)
                {
                    var emailList = {};
                    emailList.email = emails[j];
                    emailList.status = ko.observable(this.status());
                    this.inviteeEmailList.push(emailList);
                }

/**
* after getting response , changing the value of observable to true.
*/
var done = function()
{
  var self = this;
  self.status(true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<div id="foundEmail" class="suEmailIdContainer" data-bind="foreach : inviteeEmailList">

            <span data-bind="text:$data.email"></span>
            <div data-bind="text:$data.status"></div>

            <span data-bind="if: $data.status">
                <span>success</span><br/>
            </span>

            <span data-bind="if: !$data.status">
                <span>fail</span><br/>
            </span>
</div>

I have an observableArray with an observable property. As given here:

for(var j in emails)
{
    var emailList = {};
    emailList.email = emails[j];
    emailList.status = ko.observable(this.status());
    this.inviteeEmailList.push(emailList);
}

I am sending request to server and after getting response, I am changing the value of the observable (i.e. this.status()) to true or false accordingly. In html I am trying to access $data.status inside foreach of inviteeEmailList.

But that value is not reflected in the observable property emailList.status.

Anything I am doing wrong?

Upvotes: 1

Views: 249

Answers (1)

Shrabanee
Shrabanee

Reputation: 2766

var emails = [{
    'email': '[email protected]',
    'status': false
}, {
    'email': '[email protected]',
    'status': true
}]

var ViewModel = function () {
    console.log(emails)
    var self = this;

    function inner(email, status) {
        var emailList = this;
        emailList.email = ko.observable(email);
        emailList.status = ko.observable(status);
    }
    self.inviteeEmailList = ko.observableArray();
    self.failStatus = ko.observable('i am failed');
        ko.utils.arrayForEach(emails,function(item){
        self.inviteeEmailList.push(new inner(item.email, item.status));
    });
    console.log(self.inviteeEmailList())
};

ko.applyBindings(new ViewModel());
body {
    font-family: arial;
    font-size: 14px;
}
.liveExample {
    padding: 1em;
    background-color: #EEEEDD;
    border: 1px solid #CCC;
    max-width: 655px;
}
.liveExample input {
    font-family: Arial;
}
.liveExample b {
    font-weight: bold;
}
.liveExample p {
    margin-top: 0.9em;
    margin-bottom: 0.9em;
}
.liveExample select[multiple] {
    width: 100%;
    height: 8em;
}
.liveExample h2 {
    margin-top: 0.4em;
    font-weight: bold;
    font-size: 1.2em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div  data-bind="foreach:inviteeEmailList">
                <span data-bind="text:$data.email"></span>
                <span data-bind="text:$data.status"></span> 

                <span data-bind="if: $data.status">
                    <b>Hiee i am True</b>
                </span>

                <span data-bind="if: !$data.status">
                    <span data-bind="text: $root.failStatus "></span><br/>
                </span>
    <br/>
 </div>

Above code can be used to solve the question.

Upvotes: 1

Related Questions