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>'
Related
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.
I have a MEAN js 3.2 application which I need to deploy along with JAX RS.
I have index.server.view.html, layout.server.view.html files in /app/views directory.
I'm not able to understand which will be my index.html file?
Can someone tell me what changes I need to make? Do I just paste the contents of public folder from MEAN to the webapp of JAX-RS?
All the angular part in MEANJS is in the folder public/.
You only have to create and serve an index.html file.
This file looks like this :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{{title}}</title>
<!-- General META -->
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Semantic META -->
<meta name="keywords" content="{{keywords}}">
<meta name="description" content="{{description}}">
<!-- Facebook META -->
<meta property="fb:app_id" content="{{facebookAppId}}">
<meta property="og:site_name" content="{{title}}">
<meta property="og:title" content="{{title}}">
<meta property="og:description" content="{{description}}">
<meta property="og:url" content="{{url}}">
<meta property="og:image" content="/img/brand/logo.png">
<meta property="og:type" content="website">
<!-- Twitter META -->
<meta name="twitter:title" content="{{title}}">
<meta name="twitter:description" content="{{description}}">
<meta name="twitter:url" content="{{url}}">
<meta name="twitter:image" content="/img/brand/logo.png">
<!-- Fav Icon -->
<link href="/modules/core/img/brand/favicon.ico" rel="shortcut icon" type="image/x-icon">
<!--Application CSS Files-->
<!-- HTML5 Shim -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="ng-cloak">
<header data-ng-include="'/modules/core/views/header.client.view.html'" class="navbar navbar-fixed-top navbar-inverse"></header>
<section class="content">
<section class="container">
<section data-ui-view></section>
</section>
</section>
<!--Embedding The User Object-->
<script type="text/javascript">
var user = {{ user | json | safe }};
</script>
<!--Application JavaScript Files-->
<!--[if lt IE 9]>
<section class="browsehappy jumbotron hide">
<h1>Hello there!</h1>
<p>You are using an old browser which we unfortunately do not support.</p>
<p>Please click here to update your browser before using the website.</p>
<p>Yes, upgrade my browser!</p>
</section>
<![endif]-->
</body>
</html>
Your real problem is that MEANJS handle all dependency with nodejs, and you have to handle this too with JAX-RS or with webpack etc ... as you prefer.
PS : don't forget to replace {{value}} by what you need ;)
<!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>
Firebug is giving me strange behavior and i don't know if there is something with my code or if it's a bug in firebug.
The problem i'm having is that firebug does not stop on a simple breakpoint. However, if i add a watch expression it does show me the value of that, so i know that my code is working and something other must be at play here.
Code:
<!DOCTYPE html>
<html lang="nl">
<head>
<title>DOM API</title>
<meta name="keywords" content="t.a.v. klant: plaats keywords gescheiden door een comma">
<meta name="description" content="t.a.v. klant: Wordt gebruikt door google als omschrijving in de zoekresultaten">
<meta name="author" content="klantnaam">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/nav-popup.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:700,400' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="http://www.site.nl/images/favicon.ico">
<link rel="apple-touch-icon" href="images/ios-icon.png"><!--ios web app icon 114x114-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="UTF-8">
<meta name="robots" content="all">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--pluginSyntax-->
<script type="text/javascript" src="js/pluginSyntax/scripts/shCore.js"></script>
<script type="text/javascript" src="js/pluginSyntax/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="js/pluginSyntax/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="js/pluginSyntax/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="js/pluginSyntax/scripts/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="js/pluginSyntax/styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<!--pluginSyntax-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!--level1-->
<div class="level1">
<!--level1-->
<h1>DOM</h1>
<p>The Document Object Model (DOM) is a programming interface for HTML. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods.</p>
<p>In the DOM every part of a web page is represented as a <code>node</code>. There are 3 nodes:</p>
<ul id="jow">
<li><code>Element</code> nodes (h1 tag)</li>
<li><code>Attribute</code> nodes (class="heading")</li>
<li><code>Text</code> nodes (Title of this tutorial)</li>
</ul>
<!--level1-->
</div>
<!--level1-->
<script>
var ieps = document.getElementById("jow");
for (var member in ieps){
if(ieps.hasOwnProperty(member)){
alert(ieps[member]);
}
}
</script>
I have set a breakpoint on the declaration of the var ieps and offcourse firebug does not stop there and just reloads the page.
Any ideas?
Thx...
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.