I'm starting on learning EmberJS and I see this error in the console :
Uncaught TypeError: Cannot call method 'proto' of undefined ember-1.0.pre.min.js:17
It seems that just by including the library I get that error. Does anyone have any idea why I get that ?
EDIT : Added HTML Markup
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css?v=2">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script type="text/x-handlebars">
{{#view App.MyView}}
<h1>Hello world!</h1>
{{/view}}
</script>
<!-- The missing protocol means that it will match the current protocol, either http or https. If running locally, we use the local jQuery. -->
<script src="js/libs/jquery-1.7.2.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
<script src="js/libs/ember-1.0.pre.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Also there's this JS in the app.js file :
var App = Em.Application.create();
App.MyView = Em.View.extend({
mouseDown: function() {
window.alert("hello world!");
}
});
but it has been removed and all the templating part from the HTML as well, and I still got the same error (:
From the Ember Documentation:
Every Ember app should have an instance of Ember.Application. This
object will serve as the globally-accessible namespace for all of the
other classes and instances in your app
The key here is "global". Here's an example of an application:
window.App = Ember.Application.create();
Your problem is the var-keyword on your Application.create. Remove that and add Window to make the error disappear.
Related
I'm trying to download the source of https://outline.com/rUdmgC. (I want to get the same file I get when I save that url using Chrome.)
I first tried wget and curl, which didn't work. (By didn't work, I mean the downloaded source was mostly empty; The page probably uses Javascript to create its content.)
Then I did some googling, and tried this https://gist.github.com/giocomai/247d54e097b5083e2451. It didn't work, and exited with these exceptions:
TypeError: undefined is not a constructor (evaluating 'suffix.startsWith('http:')')
https://outline.com/app.js:20767
https://outline.com/app.js:17217
https://outline.com/app.js:17113 in onEachEvent
https://outline.com/app.js:17210 in value
https://outline.com/app.js:18695
https://outline.com/app.js:18792
https://outline.com/app.js:19000 in each
https://outline.com/app.js:18792 in toggle
https://outline.com/app.js:18683
https://outline.com/app.js:19498 in mountTo
https://outline.com/app.js:19638 in pushTags
https://outline.com/app.js:19000 in each
https://outline.com/app.js:19642 in pushTags
https://outline.com/app.js:19693 in mount
https://outline.com/app.js:20112
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" lang="en" class=" js csstransforms3d csstransitions" style=""><head>
<title>Outline - Read & annotate without distractions</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,height=device-height">
<meta name="description" content="Outline is a free service for reading and annotating news articles. We remove the clutter so you can analyze and comment on the content.">
<meta name="keywords" content="clean links readable readability medium typography annotations annotate">
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/daoolpmoieinofbnddaofhkhmbagfmnj">
<link rel="stylesheet" href="https://outline.com/css/outline.css?v=1.0.1">
<link rel="shortcut icon" href="https://outline.com/favicon.png">
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script async="" src="https://www.google-analytics.com/analytics.js"></script><script src="https://outline.com/js/modernizr.custom.js"></script>
<script src="https://outline.com/app.js"></script>
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-2748618594698147",
enable_page_level_ads: true
});
</script>
<style type="text/css">.yue { max-width: 650px; margin: 0 auto; }</style></head>
<body>
<outline-app></outline-app>
<script>
var riot = require('riot')
require('initialize')
</script>
</body></html>
What can I do?
Oh yes, it does. To see the resulting page you should open the page in browser and see it in the developer mode.
I am new to React.js.
Can someone please tell me why this is not working for me?
I created a basic html5 boilerplate and saved it as index.html. But when I open w/ browser, it says - Uncaught SyntaxError: Unexpected token <
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>TITLE</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
<script>
const Button = function () {
return (
<button>Go</button>
);
};
React.render((<Button/>), document.getElementById('example'));
</script>
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<div id="example"></div>
</body>
</html>
Getting back to your question, the problem that you are facing is that you are using wrong syntax, you are using JSX and in order to be able to actually use that you need babel to parse it.
To parse your code in the browser using Babel. Here its your code fixed with babel (also available on CodePen)
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>TITLE</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://unpkg.com/#babel/standalone/babel.js"></script>
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script type="text/babel">
const Button = function () {
return (
<button>Go</button>
);
};
ReactDOM.render((<Button />), document.getElementById('example'));
</script>
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div id="example"></div>
</body>
</html>
What I would recommend you to check the React Hello World Docs. It is a nice introduction to reactjs. The tutorial will give you plenty of information how to get started.
please
In my project, Vue.js is used, you need to provide a long list of items, to improve performance I want to use a tool like this:
https://github.com/CatchLabs/vue-list-view
Now I have tried using this plugin, offering what I need. My problem is that I have not managed to make it work, because when scrolling the list shown empty.
Does anyone have experience in this plugin or Vue Js who can help me?
My code:
Js
var ListView = require('./vue-list-view/lib/list-view');
var myListView = ListView.default({
template: '<div>{{ item.foo }}{{ item.bar }}</div>'
})
Vue.component('my-list-view', myListView)
new Vue({
el: '#list',
data: {
myArr: [{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'},{foo:'a',bar:'b'},{foo:'c',bar:'d'}]
}
})
HTML
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p> <![endif]-->
<h4>Star</h4>
<div id="list">
<my-list-view :items="myArr"></my-list-view>
</div>
<h4>End</h4>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<script src="js/vue.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
But the generated list is empty.
Image example
Thank you very much
You need to fix your template, adding the prop :items with the array
template: '<div :items="myArr" >{{ item.foo }}{{ item.bar }}</div>'
I made a angularjs HTML SPA that works fine.In a specific situation I need the power of a HTA. As far as I know there are no restrictions in using a HTA in combination with angular or any other valid HTML. Nevertheless I get an error when using the line
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
in a HTA, even when it's the only script tag in the header.
The error message is: Script error, Code 0, URL http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
I would expect that others have encountered this error before but I can't find anything on stackoverflow.Does anybody recognize this problem? Is there a solution or workaround?
<!DOCTYPE html>
<html lang="en-US" ng-app="myApp" ng-controller="myCtrl">
<head>
<HTA:APPLICATION
APPLICATIONNAME="my app"
SINGLEINSTANCE="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div >
...Do something
</div>
</body>
</html>
You have declared ng-app and ng-controller on HTML element, but its handlers are not defined. Also, as noted in comment, you must elevate implicit IE version to use sane JS engine with X-UA-Compatible meta. Adding those two lines fixes described error:
<!DOCTYPE html>
<html lang="en-US" ng-app="myApp" ng-controller="myCtrl">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<HTA:APPLICATION
APPLICATIONNAME="my app"
SINGLEINSTANCE="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>angular.module('myApp',[]).controller('myCtrl',['$scope',function($scope){}])</script>
</head>
<body>
<div>
...Do something
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src = "js/angular.min.js"></script>
<script type="text/javascript" src = "js/angular-route.js"></script>
<script type="text/javascript" src = "js/angular-resource.min.js"></script>
<script type="text/javascript" src = "js/script.js"></script>
</head>
<body ng-app>
<div>
{{Hello World!}}
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
script.js
if(typeof angular == 'undefined' )
{
alert("not working");
}
else
{
alert("good");
}
I get alerted good, although the page still has
{{Hello World!}}
What am I missing here? I thought the binding was supposed to work by itself.
I am using angular js 1.2.16 btw
//extra characters because stackoverflow wouldn't let me post the question. Says too much code.
All included scripts are good. However you are not telling angular where to start bootstraping your angular application.
You are missing ng-app directive on the html tag.
<html ng-app>
Also the Hello World should be a string.
{{"Hello World!"}}
Working example :
script.js
var testApp = angular.module('MyTestApp', []);
index.html page:
<!DOCTYPE html>
<html ng-app="MyTestApp">
<head>