CODEWITHSUNDEEP
javascriptknockout.js
cerhart
cerhart

Reputation: 391

Doing a knockout foreach on an observable's sub property

This is my div. 

<div id="storyBody" data-bind="foreach: CurrentStory.Paragraphs">
    <p data-bind="text: $data">

    </p>
</div>

Here is my model:

$(function ()
{
    var currentUser = "";

    nm.Story = function()
    {

        this.Paragraphs = ko.observableArray([]);
        this.CurrentEditorId = ko.observable();
        this.LastEditorId = ko.observable();


    };

    nm.StoryPreview = function()
    {

        this.Preview = "";
        this.documentId = 0;


    };

    nm.vm = function ()
    {

        var UserStoryList = ko.observableArray([]),
            CurrentStory = ko.observable(),
            GetCurrentStory = function (data) {
                nm.getStory(data.documentId, GetCurrentStoryCallback, GetCurrentStoryErrorCallback)
            },
            GetCurrentStoryCallback = function (data) {
                var story = new nm.Story().CurrentEditorId(data.CurrentEditorId)
                     .LastEditorId(data.LastEditorId);
                     story.Paragraphs(data.Paragraphs);

                CurrentStory(story);
            },
            GetCurrentStoryErrorCallback = function (data) {

            },
            LoadUserStoriesList = function() {

                nm.getStories(LoadUserStoriesListCallback, LoadUserStoriesListErrorCallback);

            },
            LoadUserStoriesListCallback = function(data)
            {

                $.each(data, function (index, value) {
                    var storyPreview = new nm.StoryPreview();
                    storyPreview.Preview = value.Preview;
                    storyPreview.documentId = value.DocumentId;
                    UserStoryList.push(storyPreview);
                });


            },
            LoadUserStoriesListErrorCallback = function (data)
            {



            };

        return {

            UserStoryList: UserStoryList,
            CurrentStory: CurrentStory,
            LoadUserStoriesList : LoadUserStoriesList,
            LoadUserStoriesListCallback: LoadUserStoriesListCallback,
            GetCurrentStory: GetCurrentStory

        }

    }();


    nm.vm.LoadUserStoriesList();
    ko.applyBindings(nm.vm);

});

Seems like this should work, but it doesn't. Any ideas?

Upvotes: 0

Views: 186

Answers (1)

leszek.hanusz
leszek.hanusz

Reputation: 5317

You are missing some parenthesis.

Could you try with:

<div id="storyBody" data-bind="foreach: CurrentStory().Paragraphs">
    <p data-bind="text: $data">
    </p>
</div>

Upvotes: 1

Related Questions