I'm trying to port an example KnockoutJS I found over to Kendo and I'm having some trouble. It seems its not working as I had hoped. It looks like the key piece is the data-template="getTemplate" binding as shown below.
<script id="current-tmpl" type="text/x-kendo-template">
<h2 data-bind="text: name"></h2>
<div data-template="getTemplate" data-bind="source: model"></div>
</script>
Where getTemplate is a viewmodel member function that returns the currently selected template name.
Here's my complete JS Fiddle: http://jsfiddle.net/raygunc/vKBa8/
And here was the inspiration Fiddle in Knockout: http://jsfiddle.net/rniemeyer/FyuSD/
Ideally I'm trying to come up with a solution to build a "wizard-like" data gathering flow using Kendo SPA and MVVM. I will have about 50-60 different templates for different questions and I need a way to load them on the fly. This is where I'm starting.
Any help is appreciated.
Related
I am trying to build a wizard type form using Reactive Forms. Following is a snippet of my code
<form [formGroup]="pizzaForm" novalidate>
<wp-wizard navBarLocation="top">
<wp-wizard-step title="Dough">
<input type="text" id="dough" [formControlName]="dough">
wizard and wizard-step are working without forms.
When I implement them with Reactive Forms and run the application, I'm seeing errors like below.
Cannot find control with name: '[object Object]'
I'm assuming this is because dough formControlName is not immediate child of pizzaForm formGroup. Not sure though. If that is the cause, how do I fix this problem? I have few fields in each wizard steps and I think all the fields should still belong to the same form so I can track the form validity. Or may be I should have different forms for each wizard step ?
Please let me know if more information is required to understand the issue.
I mistakenly used [formControlName] instead of formControlName
I am a bit confused about tag usage in the ionic framework. If you check their docs under CSS components, you'll see they use existing tags (particularly div) with a specific class choice to achieve formatting, just like you'd expect from something like bootstrap. Example:
<div class="bar bar-header bar-light">
<h1 class="title">bar-light</h1>
</div>
If you go by their code samples, however, you see that they use custom ion tags instead. Example:
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
The same practice of using custom ion tags is used in their guide as well as a pluralsight tutorial I found on ionic.
So what's going on here? If both approaches accomplish the same thing, which one is considered best practice?
Ionic Framework, as stated in their site, is:
Ionic is both a CSS framework and a Javascript UI library. Many
components need Javascript in order to produce magic, though often
components can easily be used without coding through framework
extensions such as our AngularIonic extensions.
Using CSS Components you're simply applying CSS styling to your HTML page.
When using the Ionic directives you're using a fully-featured JavaScript component and you have access to the APIs provided by the framework.
To better understand the difference you should dig into AngularJs directives.
Take the list for example. You could create a simple list using an HTML ul li:
<ul class="list">
<li class="item">
...
</li>
</ul>
but if you use the directive:
<ion-list>
<ion-item ng-repeat="item in items">
Hello, {{item}}!
</ion-item>
</ion-list>
you have access to the extended features provided by the framework (see the API at the bottom of the page).
I tend to use directives most of the times unless I know I don't want any kind of interaction with the interface.
I am trying to figure out something using angularjs. Basically, today I decided to add a time/date stamp in my form. In other words, when someone is trying to post something, the time and date will appear.
Since I have a form with a live preview, I was trying to connect the time on the live preview. Afterwards, the time stamp would get published so that I could orderBy the comments from most recent to less recent.
I have two plunkers. For some reason, I couldn't get the code to properly work. Instead of showing up in the live preview as it should, it doesn't at all. It will on the form though. The first plunker has the bare minimum code, and is shown in the following link, while the second plunker is at the bottom of this message.
http://plnkr.co/edit/zgqXGGpoOw3UY90qT23H?p=catalogue
I will still display a portion of the code here, which is where my problem lies:
<blockquote ng-repeat="review in product.reviews | orderBy:'date'">
<b>Date: {{review.date}}</b>
</blockquote>
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
<blockquote>
<b>Date: {{reviewCtrl.review.date}}</b>
<br/>
</blockquote>
<!-- DATE AND TIME -->
<!-- The other time formats are at the bottom of this page -->
<div ng-controller="timecontoller" ng-init="init();">
<div ng-model="reviewCtrl.review.date" ng-repeat="date in dates">
<b>Date: {{date.date1 | datetime}}</b>
</div>
</div>
</form>
While the second plunker has the whole viewable portion so that you can visually see the form (I removed certain elements though to make it easier to see). You'll have to click on the word "Review" first.
http://embed.plnkr.co/hHm1OPHk1uFD6YP2Roju/preview
If i followed your code correctly, it seems that you are trying to assign the review date with this line:
ng-model="reviewCtrl.review.date"
but its really not being given a data model or binding. If you truly wanted to transfer your timecontroller time update to the reviewController then I would recommend not using that as a controller, but instead refactor it as a service. Learn more here. Of course, you could also just open up your timeController scope and use a click event to transfer the data or something like that, but it doesn't seem like it should really be a controller to begin with.
Now i think I ended up changing your code more than it will really help you at all. But here is a quick implementation of how it can be done by making your timeController a service.
Plnkr
Just curious, why do you prefer this to $scope? It was giving me some trouble. Never really dealt with that before.
I'm using NetBeans as my IDE for a Ember.js project. When I create handlebars templates in my app like below the code highlighting doesn't work correctly.
<script type="text/x-handlebars">
<div>
</div>
</script>
Normally, when I'd select the first div, it and its matching end tag would highlight yellow, but this doesn't work. Since its inside the handlebars script tag both are highlighted red as errors and don't match together. This makes writing complex templates kinda annoying as it can be difficult to pinpoint syntax errors.
Is there anyway to get NetBeans to highlight inside the handlebars tag as if its regular html?
One option, until Netbeans implements this enhancement, is to add the following script tag in index.html immediately after your reference to jQuery:
<script src="js/libs/jquery.js"></script>
<!-- use following line to change script type to 'text/x-handlebars' -->
<script>jQuery('script[type="text/html"]').attr('type', 'text/x-handlebars');</script>
This is a variation of the answer provided by GCoda.
I had the same problem and tried various non satisfying fixes.
In the end I figured the best solution is simply to change the script's type attribute to text/html:
<script type="text/html">
<div>
</div>
</script>
I got same problem. And i just used a some kind of postprocessing, i am using node.js, so i did res.send(data.replace(/type="text\/html"/g,'type="text/x-handlebars"')); on my / page.
I think you can do something similar in you language, and ofcource this is not a fix, just an ugly trick to make developing more easy. Dont keep it in production.
We have a web application that its UI is based on GWT.
We are pretty satisfied from the technology, but we have one major problem: We get html files from our designer, and it takes a lot of time to integrate them into our GWT code.
Is there a quick way or rules to do that?
For instance, I would like to take the html, put it almost "as is" in a ui.xml file, and then start binding the components to UiBinder fields.
What is the quickest way to do that? What should I do with the CSS and JS files that I get?
I need some guidelines to make this conversion, so it will be quick & easy.
We have the same problem. It might be hard for a designer to get used to GWT widgets. But he'll have to forget about making HTML proof-of-concepts and using GWT directly.
We didn't overcame the difficulty. As a result, many GWT features are under-used (like CSSResources, or GWT-Bootstrap layout capabilities).
I would advise to have him learn the xml of GWT widget libraries.
You can also start by using GWT Designer. This way he can still do the design, learn the XML bit by bit, and you can still work on wiring the components.
Of course it is a slow process. People don't change old habits instantly.
Errai seems to fit your requirements.
Basically is uses regular HTML5 templates, binded to GWT logic.
"Create standard conform HTML5 templates or use existing HTML and CSS files to design your web and mobile applications."
http://errai.github.io/
Here is an example of a sign-in page:
<!DOCTYPE html>
<link rel=stylesheet href="css/TodoList.css">
<div data-field="main">
<h1>Get it done with Errai.</h1>
<div class=form>
<p class=error data-field=loginError>
Login failed. Please check that your email address and password were entered correctly.
</p>
<input type=text data-field=username placeholder="Email">
<input type=password data-field=password placeholder="Password">
<button data-field=loginButton>Sign In</button>
<p>New here? Sign up in seconds!</p>
</div>
</div>
source
(p.s. I've never used it, yet)