Question

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>

我有一个带有可观察属性的observableArray。如下所示：

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

我正在向服务器发送请求，在收到回复后，我正在相应地将observable（即this.status()）的值更改为true或false。在html中，我正在尝试访问$data.status foreach内的inviteeEmailList。

但该值未反映在可观察属性emailList.status中。

我做错了什么？

Answer 1

＆＃13;

var emails = [{
    'email': 's@s.com',
    'status': false
}, {
    'email': 'e@e.com',
    '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());

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

以上代码可用于解决问题。

如何使用可观察数组的observable属性来更改UI中的显示属性？

1 个答案: