I'm learning Knockout JS in Magento 2. There is a function getTemplate() which syntax looks like this . I want to know its working and purpose.
FilePath: app/code/CloudyDigitals/LearnKnockout/view/frontend/templates/knockout.phtml
<div id="ko-test" data-bind="scope:'ko-example'">
<!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
{
"#ko-test": {
"Magento_Ui/js/core/app": {
"components": {
"ko-example": {
"component": "CloudyDigitals_LearnKnockout/js/knockout"
}
}
}
}
}
</script>
</div>
Related
I am using Kendo UI for JQuery and need to create a data-bound Kendo menu. By data bound, I mean that the items need to be data bound to an array property of a Kendo observable. The issue is that it appears that MVVM binding messes up formatting and functionality of the items. Here is my code (based on the example found in Kendo's documentation) :
<div id="example">
<div class="demo-section k-content">
<div>
<h4>Select an item</h4>
<ul data-role="menu"
data-bind="events: { select: onSelect },
visible: isVisible"
style="width: 100%;">
<li>
Products
<ul data-template="menu-item-template" data-bind="source: items">
</ul>
</li>
</ul>
</div>
</div>
<script id="menu-item-template" type="text/x-kendo-template">
<li data-bind="text: text"></li>
</script>
<script>
var viewModel = kendo.observable({
isVisible: true,
items: ["Product1", "Product2", "Product3"],
onSelect: function (e) {
var text = $(e.item).children(".k-link").text();
kendoConsole.log("event :: select(" + text + ")");
}
});
kendo.bind($("#example"), viewModel);
</script>
<style>
.demo-section .box-col li {
margin-bottom: 0;
}
</style>
The result of executing this code looks like this:
Notice how the formatting of the items is messed up (no margins, etc.).
Do you know what's the proper way to combine data binding and Kendo menu?
Thank you!
Personally, I don't care for the MVVM style. It is too much boilerplate in my opinion.
Here is an example of setting up the menu by passing an object representing the various configuration values. Doing it like this, I do not get the same formatting issues that you get:
<!DOCTYPE html>
<html lang="en" xml:lang="en">
<head>
<title>user1044169 Example</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default-ocean-blue.min.css" />
</head>
<body>
<ul id="menu"></ul>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>
<script>
$(document).ready(function() {
$("#menu").kendoMenu({
dataSource: [
{
text: 'Products',
items: [
{ text: 'Product1' },
{ text: 'Product2' },
{ text: 'Product3' }
]
}
],
select: function(e) {
var text = $(e.item).children(".k-link").text();
console.log(text);
}
});
});
</script>
</body>
</html>
I have been finding ways to get this work but no luck.
i want to use typeahead autocomplete function.
main scripts on my app.blade
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
{{-- <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>--}}
then i have this script on my search blade
#extends('layouts.app')
#section('content')
<input class="typeahead form-control" name="query" type="search" placeholder="search" autocomplete="off"> </input>
<script type="text/javascript">
var path = "{{ route('autocomplete') }}";
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get(path, { query: query }, function (data) {
return process(data);
});
}
});
</script>
#endsection
and then my search controller
public function autocomplete(Request $request)
{
$search_text = $request->input('query');
$data = Skills::select("name")
->where("name","LIKE","%{$search_text}%")
->get();
return response()->json($data);
}
all of these were done based on a tutorial all it works only when i remove the #extends('layouts.app') , line, or if i remove the "defer" in on app.blade file.
but when i do that all of my style layout is getting messed up. and is there a solution for this without removing existing code. because all existing codes are important.
try this in script
$('input.typeahead:search').typeahead({
Any simple way to implement semantic-ui form validation with google recaptcha if the recaptcha field is checked or empty?
To expand on Arpit's answer:
Here's a non-Angular solution that worked for me
Custom validation rule above your fields validation:
$.fn.form.settings.rules.recaptchaValidate = function() {
return (recaptchaVerified);
};
Add this to your validation:
recaptcha: {
identifier: 'recaptcha',
rules: [
{
type: 'recaptchaValidate',
prompt: 'Please complete reCaptcha validation.'
}
]
}
and your HTML:
<div class="required field">
<div class="g-recaptcha" data-sitekey="{your key here}" data-callback="correctCaptcha"></div>
<input type="hidden" name="recaptcha" id="recaptch-validation">
</div>
[ ... then this just before closing body tag ... ]
<script type="text/javascript">
var recaptchaVerified = false;
var correctCaptcha = function(response) {
recaptchaVerified = true;
};
var expiredCaptcha = function() {
recaptchaVerified = false;
};
</script>
use below validation for Google reCaptcha validation.
Script:
$(document).ready(function () {
$('.ui.form').form({
recaptcha: {
identifier: 'g-recaptcha-response',
rules: [
{
type: 'empty',
prompt: 'Please complete reCaptcha validation.'
}
]
}
},
{
onSuccess: function (event, fields) {
console.log('Success:', fields);
return false;
//event.preventDefault();
},
onFailure: function (error) {
console.log('Failure',error);
return false;
}
});
});
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Self Registration Module</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="../../Content/Scripts/jquery.min.js"></script> <!-- version 3.0.0 ->
<script src="../../Content/semantic/semantic.min.js"></script>
<link href="../../Content/semantic/semantic.min.css" type="text/css" rel="stylesheet" class="ui" />
<script src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async defer></script>
</head>
<body ng-app="registrationApp">
<div class="ui container" lang="en"
<div class="ui attached message">
<div class="header">
Registation Form
</div>
<p>Fill out the form below to register user in rev</p>
</div>
<form class="ui form attached segment">
<div class="field">
<div vc-recaptcha
key="'6Lf4ax0UAAAAADWkffMAXBsFzx2dgkMMnqvw4tIE'"
ng-model="RecaptchaResponse">
</div>
</div>
</div>
</form>
</div>
</body>
</html>
I have just started trying out angular js and using the egghead.io videos. One of the samples is about routeProvider. I am using vs.net 2012 to run it but cant get it to display any of the templates or messages when I hit:
http://localhost/app.html/pizza
This is the sourcecode inside of app.html:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
// Create a new module
var app = angular.module("app", []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "app.html",
controller: "AppCtrl"
})
.when('/pizza', {
template: "yum"
})
});
app.controller("AppCtrl", function ($scope) {
$scope.model = {
message: "this is my app"
}
});
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app" ng-controller="AppCtrl">
</div>
Modified from JoeyP's post to make it work:
index.html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
// Create a new module
var app = angular.module("app", []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "app.html",
controller: "AppCtrl"
})
.when('/pizza', {
templateUrl: "yum.html" // there was a typo here in the OP
})
.otherwise( {
redirectTo: '/'
});
});
app.controller("AppCtrl", function ($scope) {
$scope.message= "this is my app";
});
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app">
<div ng-view></div>
</div>
app.html
<div>
Go get some pizza! {{message}}
</div>
yum.html
<p>
MMMM, pizza
more pizzaaaaaaaa
</p>
Note: The code need to be run on web-server (ex. Apache) to function.
app.html and yum.html are fetched by angular after the page has loaded. So in your example http://localhost/pizza should point to the page with the above code and yum.html (as well as app.html) should be located in the root of your project.
On load angular will download app.html if you hit "/" and yum.html if you hit "/pizza". Here's an example
index.html (excluding <html>,<head>,<body>, etc)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
// Create a new module
var app = angular.module("app", []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "app.html",
controller: "AppCtrl"
})
.when('/pizza', {
template: "yum.html" // there was a typo here in the OP
})
});
app.controller("AppCtrl", function ($scope) {
$scope.model = {
message: "this is my app"
}
});
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app">
<div ng-view></div>
</div>
app.html
<div>
<p ng-bind="model.app"><p>
<a ng-href="/pizza">Go get some pizza!</a>
</div>
yum.html
<p>
MMMM, pizza
</p>
The ng-controller attribute isn't needed because you defined the controllers in the routes. You do need the ng-view attribute somewhere in the main html file so angular knows where to insert the template.
John from egghead.io really needs to update this section of his tutorial.
See this answer:
Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider
you need to add this dependency:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
var app = angular.module("app", ['ngRoute']);
P.S. template: "yum" is totally valid, as in template: "<p>yum</p>"
(JoeyP thinks you're trying to do templateUrl: "yum.html")
Dynamic data is not appearing in the list. Data is fetched dynamically in jsonp format. When checked in Chrome developer tools i am able to see the response. Please find the code below. Can someone help me here ?
<!DOCTYPE html>
<html>
<head>
<title>Pull to refresh</title>
<script src="../../lib/jquery.min.js"></script>
<script src="../../lib/kendo.mobile.min.js"></script>
<link href="../../lib/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="../../lib/styles/kendo.common.min.css" rel="stylesheet" />
<div data-role="view" data-init="mobileListViewPullToRefresh" data-title="Pull to refresh">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
</div>
</header>
<ul id="pull-to-refresh-listview"></ul>
</div>
<script id="pull-to-refresh-template" type="text/x-kendo-template">
#= Title #
</script>
<script>
function mobileListViewPullToRefresh() {
var dataSource = new kendo.data.DataSource({
serverPaging: true,
pageSize: 1,
transport: {
read: {
url: "http://localhost/MvcMovieApp/Mobile/RestResponse", // the remove service url
dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
},
parameterMap: function(options) {
alert(kendo.stringify(options));
return {
q: "javascript",
page: options.page,
rpp: options.pageSize
since_id: options.since_id //additional parameters sent to the remote service
};
}
},
schema: {
data: "movies" // the data which the data source will be bound to is in the "results" field
}
});
alert("Before kendoMobileListView");
$("#pull-to-refresh-listview").kendoMobileListView({
dataSource: dataSource ,
pullToRefresh: function(){ alert("dataSource"); return true },
appendOnRefresh: true,
template: $("#pull-to-refresh-template").text(),
endlessScroll: true,
pullParameters: function(item) {
return {
since_id: item.id_str,
page: 1
};
}
});
}
</script>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
JSONP which i am receiving is :
({"movies":[{"ID":1,"Title":"Movie 1","ReleaseDate":"/Date(1355250600000)/","Genre":"Comedy","Price":10},{"ID":2,"Title":"Movie 2","ReleaseDate":"/Date(1355250600000)/","Genre":"Thriller","Price":10}]})
There must be a call back function name in the returned JSONP. The output I see here doesn't have any function name. You need to make changes to your server side code.