This fiddle has the starter kit recreated, with and extra button that alters the model.
http://jsfiddle.net/UjacC/1/
However, when clicking change, the array changes, but the view is not being updated. Why?
<title>Ember Starter Kit</title>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
<button id="btnChange">change model</button>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
<script>
$(document).ready(function(){
console.log(stuff);
$("#btnChange").click(function(){
stuff.push("d");
console.log("change",stuff);
});
});
</script>
</body>
App = Ember.Application.create();
var stuff = ["a","7","b","c"];
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return stuff;
}
});
Instead of stuff.push you need to use Embers pushObject which will notify listeners of an object that there was a change to it.
EDIT:
Here's the updated jsfiddle: http://jsfiddle.net/UjacC/2/
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>
this is my element
<dom-module id="user-verify">
<style>
paper-dialog {
--paper-dialog-background-color: white;
width: 348px;
height: 205.594px;
}
</style>
<template>
<paper-dialog id="id_verify" modal>
<h2><content></content></h2>
<div id="maincontainer">
<div class="g-recaptcha"
data-sitekey="6Lc0pAkTAAAAAGcsiru1MX6kjI6HGV8mbImc0cwk"
data-callback="recaptchaCallback"></div>
</div>
<div class="buttons">
<paper-button dialog-confirm id="varify_button" disabled>Ok</paper-button>
</div>
</paper-dialog>
</template>
<script>
Polymer({
is: "user-verify",
attached: function(){
this.$.id_verify.open();
},
recaptchaCallback: function(){
this.$.varify_button.disabled = false;
}
});
</script>
<script src='https://www.google.com/recaptcha/api.js'></script>
However, it doesn't work when i put the javascript of recaptcha in side the head of the html, so i can only put it inside the element. But now ,the data-callback function doesn't work. How to solve this? Or my code have some bugs?
Your callback recaptchaCallback is a method of the polymer object and not public function available for the recaptcha API. The way you register the function (via String) the API assumes your callback is global.
I would simply switch to attaching all the recaptcha-logic programmatically:
...
attached: function() {
grecaptcha.render(this.$.maincontainer.querySelector('.g-recaptcha'), {
'sitekey' : 'your_site_key',
'callback' : this.recaptchaCallback,
});
this.$.id_verify.open();
}
...
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")
for quick reference I have attached the image of what I want.
I would like to update (change the content) without updating the whole page (without refreshing the page). Clicking on the links or buttons on the whitebox should fetch the data from the database and that is to be displayed in the redbox. Of course first thing you would write as an answer will be "Ajax!!!", but as I'm new to laravel framework, I want to know what is the best way to achieve this, should I write the javascript directly in the view or in the controller, and how to do it through controller? If you need any more info please let me know.
Revised question, is there any other better way other then the ones answered
First we need to set up some routes. You can also do this with controllers.
Route::get('home', function()
{
return View::make('home');
});
Route::get('someRoute', function()
{
return View::make('someView');
});
For the home view, I'd add a scripts section:
//home.php
<html>
<head>
<script>
$('a.ajax').click(function(e){
e.preventDefault();
var pageURL = $(this).attr('href');
$('#ajaxContent').load(pageURL);
});
</script>
</head>
<body>
<div class="wrapper">
Click Here
<div id="ajaxContent"></div>
</div>
</body>
</html>
In case you're using blade templating, here's an implementation
//main.blade.php
<html>
<head>
#yield('styles')
</head>
<body>
<div class="wrapper">
#yield('content')
</div>
#section('scripts')
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
#show
</body>
</html>
//home.blade.php
#extends('main')
#section('content')
Click Here
<div id="ajaxContent"></div>
#stop
#section('scripts')
#parent
$('a.ajax').click(function(e){
e.preventDefault();
var pageURL = $(this).attr('href');
$('#ajaxContent').load(pageURL);
});
#stop
it would be better for you if you use jQuery to do this update using ajax functionality.
and a simple code can be like this
$('a.ajax').click(function(e){
e.preventDefault();
var pageURL = $(this).attr('href');
$('#divID-to-be-updated').load(pageURL);
});
more about ajax functionality inside jQuery can be read from http://jqapi.com/#p=load
I am trying to get my AJAX .load function to have back/reload/bookmark capability.
I am using the jquery plugin history.js.
My content is being loaded in my content div from another html file using anchor points within that to specify which div to select the information from (depending on link clicked).
Currently, i have managed to get the plugin to change the address but the back/reload functionality is not working.
This is the plugin code i am using: https://github.com/balupton/jquery-history/blob/master/scripts/jquery.history.js
Head:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="core.js"></script>
<script type="text/javascript" src="path.js"></script>
<script type="text/javascript" src="back.js"></script>
Navigation:
<div id="leftnav">
<p class="leftnavtext">
<a class="navlinks" id="about2" href="#/about">ABOUT</a> <br>
<a class="navlinks" id="process2" href="#/process">PROCESS</a> <br>
<a class="navlinks" id="materials2" href="#/materials">MATERIALS</a> <br>
<a class="navlinks" id="pricing2" href="#/pricing">PRICING</a>
</p>
AJAX Javascript code:
$(document).ready(function(){
$("#about2").click(function(){
$("#content").load("content.html #about");
});
$("#process2").click(function(){
$("#content").load("content.html #process");
});
$("#materials2").click(function(){
$("#content").load("content.html #materials");
});
$("#pricing2").click(function(){
$("#content").load("content.html #pricing");
});
$("#pricing3").click(function(){
$("#content").load("content.html #pricing");
});
$("#infinite1").click(function(){
$("#content").load("content.html #infinite");
});
});
back.js Code (path.js is the plugin.):
function nav_event(hash) {
// Some sort of navigation happened, update page
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/about');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/process');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/materials');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/pricing');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/infinite');
}
Can anyone see where im going wrong with this? Or can they suggest a better plugin to use?
Thanks
if (navigator.userAgent.match('MSIE')!=null) {return false;} /*prevent IE crash*/
window.addEventListener("popstate", function(e) {window.location = lastURL; });
window.history.pushState({"html": newURL,"pageTitle": newURL},"", newURL);
I stole this from another answer.
Unfortunately it does not work in IE.
further reading:
http://html5doctor.com/history-api/
http://diveintohtml5.info/history.html