CODEWITHSUNDEEP
javascripttwitter-bootstrapknockout.js
Milan Stojanovic
Milan Stojanovic

Reputation: 307

How to do a foreach binding using KnockoutJS in Bootstrap-themed dropdown

I'm developing a small notifications-like module, where the user can see his 5 latest activities that are logged in the DB (MSSQL). The values that I need are all there, but for some reason knockout binding is not working. Here are code snippets:

<div class="dropdown-menu toolbar pull-right" data-bind="with: layoutLogsModel">
  <h3 style="border: none;">Recent activities:</h3>
  <!-- "mailbox-slimscroll-js" identifier is used with Slimscroll.js plugin -->
  <ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: layoutLogsModel.notification">
    <div class="alert inbox">
      <a href="javascript:void(0)">
        <i class="icon-book" style="color: orange;"></i>
        Some text
      </a>
      <br>
      Some text #2
    </div>
  </ul>      
</div>

For now, I only want to display random text for every item that is in the observableArray. ViewModel is the following:

var layoutLogsModel = {    
    notification: ko.observableArray()
};

function getLastFiveActivities() {
    get(apiUrl + "Logs/GetLastFiveActivities", { ClientUserID: loggedUserID }, function (data) {        
        layoutLogsModel.notification(data);
    });
}

And every time I call this function, the list is empty (IMAGE) (the function is called on click, and absolutely no errors are shown in the console).

What is it that I am doing wrong?

EDIT:

The thing was, I forgot to execute ko.applyBindings for that viewModel. Then, I changed the HTML to look like this:

<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: notification">
                                    <div class="alert inbox">
                                        <a href="javascript:void(0)">
                                            <i class="icon-user" style="color: green;"></i>
                                            <span data-bind="text: $data"></span>
                                        </a>
                                    </div>
                                </ul>

Aslo, I modified the get function slightly, like this:

function getLastFiveActivities() {
get(apiUrl + "Logs/GetLastFiveActivities", { ClientUserID: loggedUserID }, function (data) {        
    layoutLogsModel.notification(data.Notification);        
});

}

(changed data to data.Notification based on the MVC model property that contains the array) After all that, the data was available immediately.

Upvotes: 0

Views: 602

Answers (1)

Beelphegor
Beelphegor

Reputation: 226

try removing the layoutLogsModel from the foreach, you are already using it with the binding "with", so eveything in that div will be part of layoutLogsModel.

<div class="dropdown-menu toolbar pull-right" data-bind="with: layoutLogsModel">
  <h3 style="border: none;">Recent activities:</h3>
  <!-- "mailbox-slimscroll-js" identifier is used with Slimscroll.js plugin -->
  <ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: notification">
    <div class="alert inbox">
      <a href="javascript:void(0)">
        <i class="icon-book" style="color: orange;"></i>
        Some text
      </a>
      <br>
      Some text #2
    </div>
  </ul>      
</div>

Upvotes: 1

Related Questions