Question

I thought it would be fun to check Sproutcore out, but I ran into an error which I cannot seem to figure out. I’m following the recent NetTuts+ tutorial on writing a microblog with the framework. My code is the following:

Microblog.mainPage = SC.Page.design({

mainPane: SC.MainPane.design({
    childViews: 'topView postView contentView'.w(),

    topView: SC.ToolbarView.design({
        childViews: 'appName'.w(),
        layout: { top: 0, left: 0, right: 0, height: 40 },
        anchorLocation: SC.ANCHOR_TOP,

        appName: SC.LabelView.design({
            layout: { top: 5, left: 5, width: 100 },
            displayValue: "MicroBlog App",
            layerId: "mb-logo" // html id attribute
        })
    }),

    postView: SC.View.design({
        childViews: 'form'.w(),
        layout: { top: 40, height: 75 },
        backgroundColor: 'white',

        form: SC.View.design({
            childViews: 'postContent post'.w(),
            layout: { left: 200, right: 200 },

            postContent: SC.TextFieldView.design({
                layout: { top: 10, left: 10, right: 10, height: 60 },
                isTextArea: YES,
                hint: "What's on your mind?"
            }),

            post: SC.ButtonView.design({
                layout: { top: 80, right: 10, width: 100 },
                title: "Post",
                isDefault: YES
            })
        })
    }),

    contentView: SC.ScrollView.design({
        hasHorizontalScroller: NO,
        layout: { top: 135, bottom: 0, left: 0, right: 0 },
        contentView: SC.ListView.design({

        })
    })
})
});

However, for some reason it doesn’t load the button and when I click on the page where either my buttonView or contentView goes, I get the following error in my console:

Uncaught TypeError: Cannot call method 'get' of null

I tried googling for it, but no luck. I’m using Sproutcore 1.6.

Thanks

Answer 1

Apparently the problem lies in the last part:

 contentView: SC.ScrollView.design({
    hasHorizontalScroller: NO,
    layout: { top: 135, bottom: 0, left: 0, right: 0 },
    contentView: SC.ListView.design({

    })
})

For some reason, those two views can’t have the same name. I changed this to:

contentView: SC.ScrollView.design({
    childViews: 'contentListView'.w(), // do i need this here?
    hasHorizontalScroller: NO,
    layout: { top: 150, bottom: 0, left: 0, right: 0 },
    contentListView: SC.ListView.design({

    })
})

Seems to work fine now!