I just started to learn using Vue. I wrote really simple code like the following.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<h2>{{number}}</h2>
<h2>Here it is!</h2>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
number:0
}
})
</script>
</html>
However, there is no number value.
But, when I open that code just by Ctrl+O on chrome, it shows succefully!
I definitely checked network by chrome dev tool and I got successfully vue.js from https://unpkg.com/vue#2.5.22/dist/vue.js What's wrong with it?
Loading the framework in the head is a good way to start.
See the example below, it works fine in here.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<h2>{{number}}</h2>
<h2>Here it is!</h2>
<button #click="clk">click</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
number: 0
},
methods: {
clk(){
this.number++;
}
}
})
</script>
</body>
</html>
I thought you should return an object from a function for data.
data : function() {
return {
number : 0
};
}
Related
Once page load google tends graph is getting load under trendsBlock class. In below code once after calling next_fun() complete html code getting render with graph. I need to render inside of trendsBlock.
<html>
<body>
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1173_RC01/embed_loader.js"></script>
<div class="trendsBlock">
<script type="text/javascript">
trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"IN","time":"2016-10-02 2017-11-02"},{"keyword":"citi bank","geo":"IN","time":"2016-10-02 2017-11-02"}],"category":0,"property":""}, {"exploreQuery":"date=2016-10-02 2017-11-02,2016-10-02 2017-11-02&geo=IN&q=dbs%20bank,citi%20bank","guestPath":"https://trends.google.com:443/trends/embed/"});
</script>
</div>
<button onclick="next_fun()">Click to next trends</button>
<script type="text/javascript">
function next_fun(){
//innerHTML in to class trendsBlock
//?
}
</script>
</body>
</html>
The renderExploreWidgetTo method allows one to embed the charts to any HTML element.
You can look at the below sample code to understand.
function next_fun(){
var divElem = document.getElementById('sampDiv');
trends.embed.renderExploreWidgetTo(divElem,"TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dbs%20bank&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});
}
<html>
<body>
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1328_RC04/embed_loader.js"> </script>
<div id='sampDiv'>
</div>
<button onclick="next_fun()">Click to next trends</button>
</body>
</html>
P.S: when I am running the above code in StackOverflow's internal compiler/browser it throws an error.
Error img!!
But works fine otherwise.
I'm trying to implement unit testing within my SAPUI5 Application. I understand how to perform the unit tests --but I'm not understanding how to configure the testing in my SAP UI5 application. I believe the problem is how I'm attempting to load in the controller I want to test. I have a basic tree structure like so:
I'm unfamiliar with how to set up the tests. When I insert the following controller, I get a script error:
test.js
sap.ui.require(["../Controller/Main.controller.js"],
function(MyController){
//Quint code
test("hello test", function(assert) {
assert.ok(1 == "1", "Passed!");
});
});
initialTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.15.0.css">
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js">
</script>
<script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script>
<script src="tests.js"></script>
<script src="/Controller/Main.controller.js"></script>
<script>
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
screenshot of the error
How can I properly load in the controller.js that I would like to test?
Try including like this
jQuery.sap.registerModulePath("controller", "../Controller");
jQuery.sap.require({
modName : "controller.Main",
type : "controller"
});
QUnit.test("Some text", function() {
var oCont = sap.ui.controller("controller.Main");
});
I'm trying to change the height of a panel in an ember .hbs file from it's controller. I've seen lots of examples, but I can't seem to get things right. Here's a jsbin I put together for it, and following that is my code. Any help will be much appreciated.
Thanks!
version: 1.13.8
node: 0.12.7
npm: 2.13.4
os: win32 x64
http://jsbin.com/kopajitili/3/edit?html,js,output
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="http://builds.emberjs.com/tags/v1.13.5/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.5/ember.debug.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<div class="panel panel-primary" id="linkPanel" style="width:205px;">
<div class="panel-heading">
<h3 class="panel-title">Stuff</h3>
</div>
<div class="panel-body">
Blah blah blah...
</div>
<div>
<button style="margin: 10px;" {{action "addHeight"}}>Add Stuff</button>
</div>
</div>
</script>
</body>
</html>
Controller (JS)
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.ApplicationController = Ember.Controller.extend({
actions: {
addHeight: function() {
// My goal here is to be able to increase the height
// of the panel "#linkPanel" from an action.
// In this version, I'm just trying to see
// if I can reference the panel (I can't.)
// In the commented out lines, I was trying
// to actually change it.
// Any help and/or advice will be much appreciated.
alert(document.getElementById('#linkPanel'));
//this.set('this.document.getElementById('#linkPanel').height',"500px");
//this.set('this.document.getElementById('#linkPanel').style.height',"500px");
//this.set('document.getElementById('#linkPanel').style.height',"500px");
//this.set('document.getElementById('#linkPanel').style.width',"500px")
//this.set('document.getElementById('#linkPanel').style',"Height=500px")
}
}
});
When you call getElementById you should not prepend the # -- that is jQuery syntax. Revise it to document.getElementById('linkPanel');
Revised your JSBin:
http://jsbin.com/liwovawexu/edit?js,output
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.ApplicationController = Ember.Controller.extend({
actions: {
addHeight: function() {
document.getElementById('linkPanel').style.height = "500px";
}
}
});
I have written a html with a div.
I have two hbs files. I rendered one as partial and other as normal. I am not able to invoke action on the templates. I am getting missing helper error.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="holder">
</div>
<script src="js/libs/jquery-v1.11.1.js"></script>
<script src="js/libs/handlebars-v1.3.0.js"></script>
<script src="js/libs/ember-v1.6.1.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app.js"></script>
</body>
</html>
JS:
var data={title: "My New Post", body: "This is my first post!"};
function getTemplate(templateName,hbsPath,type){
$.ajax({
url: hbsPath, //ex. js/templates/mytemplate.handlebars
cache: true
}).done(function (src) {
if (type === "partial") {
Handlebars.registerPartial(templateName, $(src).html());
} else {
template = Handlebars.compile($(src).html());
temp=template(data);
$("#holder").append(temp);
}
});
}
getTemplate("dummy","/Test/templates/dummy.hbs","partial");
getTemplate("dummy","/Test/templates/application.hbs");
App = Ember.Application.create({});
App.Router.map(function(){
this.resource('dummy');
});
App.ApplicationController=Ember.ObjectController.extend({
needs:['dummy'],
actions:{
refresh: function(){
alert("application template refresh");
}
}
});
App.DummyController=Ember.ObjectController.extend({
actions:{
refresh: function(){
alert("dummy template refresh");
}
}
});
HBS:
application.hbs:
<script id="application" type="text/x-handlebars-template">
{{> dummy}}
</script>
dummy.hbs:
<script type="text/x-handlebars" data-template-name='dummy'>
<div {{action 'refresh' target="controllers.dummy"}}>
Refresh
</div>
<div {{action 'refresh'}}>
Refresh
</div>
</script>
The code in ur demo and the code in question are different. Here is a fixed demo based on the code in ur question.
Fixing the demo u provide may need you to include the vanilla handlebars library as ember is now using HTMLBars which is built on top of handlebars but a bit different.
Em.Handlebars.compile is now actually using HTMLBars compile method. You can see here.
You may need to use something like https://github.com/rwjblue/broccoli-ember-inline-template-compiler
I am new in Ember and trying to create a simple application based on the tutorial provided by Ember website and videos.
In the sample below I would like to display two tabs Tab1 and Tab2; when switching to Tab1 it should have "Jan" and "Feb"; when switching to Tab2 it should have "Mar" and "Apr". I can switch between tabs but there is no content in any of them, there are no errors in the console.
Please help me understand why the tab content is empty.
Thanks!
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember test</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no- icons.min.css" rel="stylesheet">
</head>
<body>
<script type="text/x-handlebars">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>{{#link-to 'tab1'}}Tab1{{/link-to}}</li>
<li>{{#link-to 'tab2'}}Tab2{{/link-to}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="tab1">
<p>{{field1}}</p>
<p>{{field2}}</p>
</script>
<script type="text/x-handlebars" id="tab2">
<p>{{field3}}</p>
<p>{{field4}}</p>
</script>
<script src="js/libs/jquery-v1.11.1.js"></script>
<script src="js/libs/handlebars-v1.3.0.js"></script>
<script src="js/libs/ember-v1.6.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Here is app.js
App = Ember.Application.create();
var tab1 = {
field1: "Jan",
field2: "Feb"
};
var tab2 = {
field3: "Mar",
field4: "Apr"
};
App.Router.map(function() {
this.resource('tab1');
this.resource('tab2');
});
App.tab1Route = Ember.Route.extend({
model: function() {
return tab1;
}
});
App.tab2Route = Ember.Route.extend({
model: function() {
return tab2;
}
});
Ember conventions mandate the name of the classes for your routes. Your Route classes must be named App.Tab1Route and App.Tab2Route, not App.tab1Route and App.tab2Route. The case of the class names is important.
The rest of your code seems fine!