KendoUI Bridge Documentation
  • Introduction
  • About this application
    • Introduction
    • Navigation guide
    • Components catalog
    • Installation
    • Catalog index
    • Themes selector
  • About Aurelia
    • Key features
  • About KendoUI
    • Integrated with Aurelia
    • Why choose KendoUI
  • Developers tutorials
    • Introduction
    • Sample application structure
    • esnext - kendo
    • esnext-aspnetcore - kendo-2017
    • esnext-aspnetcore - kendo-2015
    • typescript - kendo
    • typescript-aspnetcore - kendo
    • esnext- webpack
    • typescript-webpack kendo
  • Developers notes
    • Current limitations
    • Loading a subset of controls
    • Lazy loading wrappers
    • Running gists
    • Kendo Tooltip HTML content
    • Bundling details
    • Dynamic content creation
    • Bundling step by step instructions
    • What you need to know
    • Localization
    • Prevent JSPM from loading jQuery
  • Bridge developers notes
    • Introduction
    • Bridge utilities
    • Generation of bindables
    • Babel DTS generator
    • Grid HTML api
    • Template compilation
    • Harvesting bindable variables
    • Registry helper class
    • Creating gists for the catalog app
  • Troubleshooting
    • Introduction
    • Using gists and GistRun
Powered by GitBook
On this page
  • 7.2 Using gists and GistRun
  • to experiment with Aurelia components and report problems
  • 2.1 Experimentation
  • 2.2 Report a problem to Aurelia-UI-Toolkits team
  1. Troubleshooting

Using gists and GistRun

PreviousIntroduction

Last updated 7 years ago

Troubleshooting

7.2 Using gists and GistRun

to experiment with Aurelia components and report problems

By adding support to use the , this catalog application provide the ability to run each example of each Aurelia Kendui bridge component - as illustrated on this following image

Image 1

Click on the RUN button will result with this same example "Area charts: multi axis" running in a new window, completely isolated from the Catalog application:

Image 2

2.1 Experimentation

It should be pretty obvious that running any of the samples from this Components catalog applications as a gist you get a very dramatic increase of your ability to check this sample's behavior. You can change any part of JavaScript code (in a meaningful way preferrably) in the view model, or any attributes in the view -- and get nearly instant (1 - 2 seconds) response from the GistRun.

2.2 Report a problem to Aurelia-UI-Toolkits team

It is important to point out that a gist should contain the smallest possible "extract" of your application - not the whole app, by any means. It was always a good practice to report a problem by making sure to reduce your app to the smallest amount of code that still demonstrates the issue you need help with - so while the concept of a gist makes such reduction a lot easier to do, it still requires some effort.

2.2.2 Hot to create a gist for Aurelia application

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
    <script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

and main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}

2.2.3 Invoking GistRun

The syntax is simply

https://gist.run/?id=c14c7cd4ab59c8d12d7f8ff6b6cc2947

Here is the screen shot of the gist we are describing in this article, rendered by GistRun

Image 3

In order to create a "basic application code" for your gist, it is often best tp use the existing gists from the catalog application as start. For example, if you have a problem with Area chart, click on the RUN button on page http://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/area-charts/multi-axis (as shown on Image 1 above) and note the View (app.html) and View model (app.js) which you can used as the start for your new gist.

Image 4

2.2.1 Summary In order to ensure complete context of your problem and get the fastest possible response, please create an issue and then which will become a part of your problem report.

Rather than starting with an empty gist, create a fork of which has built-in files that comprise Aurelia run time components:

With this in mind, the task of creating a gist that describes your problem, consist of only entering only a few of your application files. However, instead of adding these files using the , we will use the (Aurelia) application to do that task - simply because it is a lot easier to add more code and you can immediately verify that the code you added is correct.

where the string query parameter c14c7cd4ab59c8d12d7f8ff6b6cc2947) is the gist id you got in the process of forking the KendoUI bridge default gist in section 2.2.1 above. You can learn more about GistRun app .

here
create a gist
this gist
gist editor
GistRun
here
GistRun tool