why phonejs dxContent is not showing?

Question

I am preparing one PhoneJS application. In that I am trying to put one simple butotn inside the view using the following code but not able to see that button and It's showing only loading icon...

home.html

<div data-options="dxView : { name: 'home', title: 'Home' } " >
<div class="home-view"  data-options="dxContent : { targetPlaceholder: 'content' } " >
    <p>Welcome</p>
    <div data-bind="dxButton: { text: 'Click me!', clickAction: showHelloWorld }"></div>

</div>
</div>

home.js

MyApp.home = function (params) {

var viewModel = {
//  Put the binding properties here
var showHelloWorld = function() {
    alert("Hello world!");
};
ko.applyBindings(myViewModel);
return viewModel;
};

Anyone can help me please?

Answer 1

Your view model code is not well-formed:

MyApp.home = function () {
    var viewModel = {
        showHelloWorld: function() {
            alert("Hello world!");
        }
    };
    return viewModel;
};

viewModel should be valid js object. You also shouldn't call applyBindings. It will be called by framework. You should create the HtmlApplication and specify app routing. Not sure, maybe you've done it already.

Here is working fiddle: http://jsfiddle.net/tabalinas/jb537/

Check out this tutorial "how to build you first PhoneJS app": http://phonejs.devexpress.com/Documentation/Tutorial/Getting_Started/Your_First_Application?version=13_2