Html code:
<body ng-controller="MainCtrl">
<h1>Outer: {{aaa.bbb}}</h1>
<div ng-controller="InnerCtrl">
<h1>Inner1: {{$parent['aaa']}}</h1>
<h1>Inner2: {{$parent['aaa.bbb']}}</h1>
</div>
</body>
Angularjs code:
app.controller('MainCtrl', function($scope) {
$scope.aaa = {
bbb:'Freewind'
}
});
app.controller('InnerCtrl', function($scope){
});
The rendered html will be:
Outer: Freewind
Inner1: {"bbb":"Freewind"}
Inner2:
You can see the Inner2: is empty.
How can I show it?
Here is a live demo: http://plnkr.co/edit/7IfxgsNCaUpKH9HOpr26?p=preview
The InnerCtrl scope inherits the properties from its parent scope (MainCtrl scope), therefore you can access those properties directly:
<div ng-controller="InnerCtrl">
<h1>Inner1: {{aaa}}</h1>
<h1>Inner2: {{aaa.bbb}}</h1>
</div>
Related
Let's say I have two components:
Bold1.svelte:
<script>
external let t="";
</script>
<b>{t}</b}
Usage:
<Bold1 t="my text 1" />
Works like expected.
Bold2.svelte:
<script>
</script>
<b>???</b>
Usage:
<Bold2>
my text 2
</Bold2>
What do I have to write instead of ??? to get a bold my text 2? I have tried <b>{this}</b>, but without success.
Get the slot content.
App.svelte:
<script>
import Child from './Child.svelte';
</script>
<Child>Hi</Child>
Child.svelte
<script>
import { onMount } from 'svelte';
let thisObj;
let text = '';
onMount(() => {
text = thisObj.textContent;
});
</script>
<div bind:this={thisObj}>
<slot />
</div>
<h3>
Slot content-1: {text}
</h3>
Are you trying to pass HTML and have it render as HTML?
If var t has HTML, you can render it like this:
{#html t}
https://svelte.dev/docs
Just watch out for XSS risk.
I want to render the pure HTML coming from some external source into react component. I saw few solutions where people are talking about some conversion tools (HTML to JSX) but I want to handle everything in my component so while mounting it will get the HTML response and that needs to render.
You can use dangerouslySetInnerHTML for this:
function createMarkup() { return {__html: 'First ยท Second'}; };
<div dangerouslySetInnerHTML={createMarkup()} />
But as the method name suggests: you should be very sure of what you are doing there and the security implications it has.
This shouldn't be difficult to do . Assign your HTML to a div and then render it using {variable name} JSX allows you to do this and with ES6 integration you can also use class instead of className.
var Hello = React.createClass({
render: function() {
var htmlDiv = <div>How are you</div>
return <div>Hello {this.props.name}
{htmlDiv}
</div>;
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
I am using iron router to render a template within meteor framwork, as i was following probably an outdated tutorial, it seems to me there is a change in syntaxes which i could not figure out.
layout.html
<div class="container">
<div class="row">
<div class="span2">
<p>cell</p>
</div>
<div class="span7">
<p>cell</p>
</div>
<div class="span3">
<p>cell</p>
</div>
</div>
</div>
index.js
function.setDefault ('category', null );
Router.configure({
layoutTemplate:'layout',
yieldTemplates:{
'products':{to:'products'},
'cart':{to:'cart'},
'categories':{to:'categories'}
}
});
Router.route(function(){
this.route('/', layout);
this.route('/products',{
data:function(){
Session.set('category',this.params.name);
},
template:'layout',
path:'/:name'
})
});
The following error occurs
unexpected token (1:8)
Where you have Router.route and use this.route in a function, Router.route should read Router.map however this is deprecated in favour of Router.route (without the map wrapper) as below:
Session.setDefault ('category', null );
Router.configure({
layoutTemplate:'layout',
yieldTemplates:{
'products':{to:'products'},
'cart':{to:'cart'},
'categories':{to:'categories'}
}
});
//You will need to declare a template at the least here so it knows what to render to main area
Router.route('/', {template: "template_name");
Router.route('/products/:name',{
onBeforeAction:function(){
Session.set('category',this.params.name);
this.next ();
},
//you don't need this to be layout
//as you are defining a default layout above
//but you will need to specify a template for the main yield area
template:'template_name'
// you don't need to specify path here as it will use '/products'
//if you want to specify a route name use line below
//,name: 'routename'
});
Where url would be /products/product_name
Where template_name is the template you want to render in your main {{> yield}}
In your layout template you need to place the following for your yields wherever you want to display them
{{> yield 'products'}}
{{> yield 'categories'}}
{{> yield 'cart'}}
{{> yield }} //this is the template you specify in template: 'template_name'
(Done from my phone so can't test but can update later if it doesn't work for you)
I see a lot of questions regarding on how to listen for changes in attributes. But none on how to actually change them.
Even in debug, I can't find the attributes in the object tree. How do I achieve this? is there a more polymeric way of doing the following ?
<polymer-element name="my-element" attributes="owner">
<template>
<p id="el">{{owner}}</p>
</template>
<script>
Polymer({
owner: "Miguel",
});
</script>
</polymer-element>
<my-element id="el1" owner="blabla"></my-element>
<script>
$(document).ready(function(){
$("el1").owner = "Mary"
})
</script>
It prints blablab, but doesn't change it to Mary
In 0.5, you need to wait for polymer-ready. See docs here.
<head>
<link rel="import" href="path/to/x-foo.html">
</head>
<body>
<x-foo></x-foo>
<script>
window.addEventListener('polymer-ready', function(e) {
var xFoo = document.querySelector('x-foo');
xFoo.barProperty = 'baz';
});
</script>
</body>
Ideally, your app would be one element like <my-app></my-app> so that you'd have a binding for the owner attribute like so:
<my-element owner="{{owner}}"></my-element>
And my-element would reside in another Polymer element in which you can set the owner attribute like so:
// Parent Polymer element
Polymer({
_someFunctionYouCall: function() {
this.owner = 'Mary';
}
});
Coming from a Rails background, you can have multiple Layouts - for say, anonymous user pages and then authenticated pages.
Is this possible with Ember?
I've tried declaring a new templateName in my UsersRouter, with no avail.
I've also checked this guide: http://emberjs.com/guides/views/adding-layouts-to-views/
But it doesn't seem to be working :/
You can use {{render}} inside an if helper to show different layouts.
For instance if you have an ApplicationController that has login and logout action handlers, and a corresponding `loggedIn' property.
App.ApplicationController = Ember.Controller.extend({
loggedIn: false,
login: function() {
this.set('loggedIn', true);
},
logout: function() {
this.set('loggedIn', false);
}
});
The you can bind to the loggedIn property inside the application template like so.
<script type='text/x-handlebars' data-template-name='application'>
<button {{action login }}>Login</button>
<button {{action logout }}>Logout</button>
{{#if loggedIn}}
{{render 'user'}}
{{else}}
{{render 'guest'}}
{{/if}}
</script>
Where user and guest are corresponding templates.
<script type='text/x-handlebars' data-template-name='user'>
<h1>User layout</h1>
<div class='box user'>
{{outlet}}
</div>
</script>
<script type='text/x-handlebars' data-template-name='guest'>
<h1>Guest layout</h1>
<div class='box guest'>
{{outlet}}
</div>
</script>
Here's a working jsbin.
Edit: To not use the application route based on some static criteria or loaded via model hooks, you can override the renderTemplate method of the ApplicationRoute.
App.ApplicationRoute = Ember.Route.extend({
renderTemplate: function() {
var loggedIn = false;
if (loggedIn) {
this.render('user');
} else {
this.render('guest');
}
}
});