Durandal ko mapping : mapped li not rendered in DOM

Question

I'm new with durandal. I was trying to add a new module into the demo app provided by durandal using mimosa skelton.

I created the module followings steps in this

When I run the app <li> associated with data-bind is not populated in the DOM. ie., no data is shown in the page.

But when I used console.log to print data inside myPage.js its giving the required output.

my module backend.js

define(function(require){
  return {
    getCustomers:function(){
      //do some ajax and return a promise
        return $.ajax({
          url: 'http://graph.facebook.com/facebook?callback=?',
          dataType: 'json',
        }).promise();
    }
  };
});

my myPage.js

define(function (require) {
    var backend = require('backend');
    var ko = require('knockout');

    return {
        customer:ko.observableArray([]),
        activate:function(){
          var that = this;
          return backend.getCustomers().then(function(result){
            that.customer(result);
          });
        }
      };
});

myPage.html

<div>
  <h2>FB Page Detail</h2>
  <ul data-bind="foreach: customer">
    <li data-bind="text: name"></li>
  </ul>
</div>

result obtained

{"about":"Facebook's mission is to give people the power to share and make the world more open and connected.","category":"Product/service","company_overview":"Newsroom: http://newsroom.fb.com\nInvestor Relations: http://investor.fb.com/","founded":"February 4, 2004","is_published":true,"talking_about_count":207120,"username":"facebook","website":"http://www.facebook.com/facebook","were_here_count":0,"id":"20531316728","name":"Facebook","link":"http://www.facebook.com/facebook","likes":96174118,"cover":{"cover_id":"10151496277356729","source":"http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash2/s720x720/247388_10151496277356729_2043388331_n.jpg","offset_y":0,"offset_x":0}} 

What did I do wrong? How to fix this issue?

Answer 1

I think your problem here is about how you are using knockoutJS not durandal .. You are passing object(single object) to your observableArray .. While you should pass array of objects or array of one object..

I have made simple DEMO to reproduce your issue..

Notice there is no results are displayed, but if you put magic [] around your data to be array of single object you 'll get Facebook name displayed

Answer 2

Not sure how you applied bindings here, you may need to use because your model is set to customer property in the view model.
data-bind="html:customer.name"