This is a migrated thread and some comments may be shown as answers.

Where does everything go?

1 Answer 11 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Adam
Top achievements
Rank 1
Adam asked on 20 May 2015, 05:32 PM

I've looked around a bit but I tend to see conflicting samples. I'm trying to create my first app in AppBuilder through Visual Studio and keeping to MVVM principles but finding it difficult to know just where all of this sample code goes. The default project gives an example app.js which seems to models, but in this case, where does the view model go? Does everything go into the app.js? Creating an observable and binding doesn't seem to do anything, in this case meaning my input does not bind with the value after load. 

 Anyone, help, please.

 Adam.g

 Sample html:

<div id="view" data-role="view" data-title="Quick Search" data-layout="main">
  <form id="QuickSearchForm">
    <fieldset>
      <ul data-role="listview" data-style="inset">
        <li>
          <label>Product Identity:</label>
          <input type="text" data-bind="value: product_identity" />
        </li>
        <li>
          <label>Product Serial #:</label>
          <input type="text" />
        </li>
      </ul>
    </fieldset>
    <div class="right-aligned-buttons">
      <input type="button" value="Clear" />
      <input type="button" value="Execute Search" />
    </div>
  </form>
</div>
 
<script>
  $(document).ready(function () {
    var myViewModel;
    myViewModel = kendo.observable({
      product_identity: 'Test'
      /*lastName: "Le",
      email: "lelong37@gmail.com",
      twitter: "twitter.com/lelong37",
      site: "blog.longle.net",
      address: "3737 Galatic Avenue",
      city: "Cloud City",
      state: "Texas",
      occupations: ["Please Select", "Hacker", "Jedi", "Ninja"],
      occupation: "Jedi",
      isSaved: false,
      isDisabled: true,
      edit: function (e) {
        this.set("isDisabled", false);
      },
      cancel: function (e) {
        this.set("isDisabled", true);
      },
      reset: function (e) {
        this.set("firstName", null);
        this.set("lastName", null);
        this.set("email", null);
        this.set("twitter", null);
        this.set("site", null);
        this.set("address", null);
        this.set("city", null);
        this.set("state", null);
        this.set("zip", null);
        this.set("occupation", "Please Select");
      },
      load: function (e) {
        LoadJohnDoesInfo();
      }*/
    });
 
    kendo.bind($('#view'), myViewModel);
 
    /*function LoadJohnDoesInfo() {
      myViewModel.set("firstName", "John");
      myViewModel.set("lastName", "Doe");
      myViewModel.set("email", "jdoe@skyranch.com");
      myViewModel.set("twitter", "twitter.com/jedi");
      myViewModel.set("site", "starwars.com");
      myViewModel.set("address",  "1212 SkyRanch");
      myViewModel.set("state", "California");
      myViewModel.set("zip", "98000");
      myViewModel.set("occupation", "Jedi");
    }*/
  });
</script>

 

Sample app.js

(function () {
 
    // store a reference to the application object that will be created
    // later on so that we can use it if need be
    var app;
 
    // create an object to store the models for each view
    window.APP = {
        models: {
            Home: {
                title: 'Home'
            },
            QuickSearch: {
                title: 'Quick Search'
            },
            SearchProducts: {
                title: 'Search Products'
            },
            BooleanSearch: {
                title: 'Boolean Search'
            }
            /*//contacts: {
            //  title: 'Contacts',
            //  ds: new kendo.data.DataSource({
            //    data: [{ id: 1, name: 'Bob' }, { id: 2, name: 'Mary' }, { id: 3, name: 'John' }]
            //  }),
            //  alert: function(e) {
            //    alert(e.data.name);
            //  }
            //}*/
        }
    };
 
    // this function is called by Cordova when the application is loaded by the device
    document.addEventListener('deviceready', function () {
 
        // hide the splash screen as soon as the app is ready. otherwise
        // Cordova will wait 5 very long seconds to do it for you.
        navigator.splashscreen.hide();
 
        app = new kendo.mobile.Application(document.body, {
 
            // you can change the default transition (slide, zoom or fade)
            transition: 'slide',
 
            // comment out the following line to get a UI which matches the look
            // and feel of the operating system
            // skin: 'flat',
            skin: 'uniform',
 
            // the application needs to know which view to load first
            initial: 'views/QuickSearch.html'
        });
 
    }, false);
 
 
}());

1 Answer, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 21 May 2015, 08:18 AM
Hi Adam,

please check this help article which outlines the basics of mobile app mvvm integration.

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
General Discussions
Asked by
Adam
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Share this question
or