How to nest polymer templates properly? - templates

I recently started learning polymer and am trying to use iron-ajax iron-list and templates together. For some reason the values are showing blank on screen, but cards are getting created. Taking example from this question, I created two polymer-elements search-list and search card. Search card for showing data and search list for fetching data and populating a list with card. Search list is following:
<link rel="import" href="../search-card/search-card.html">
<dom-module id="search-list">
<template>
<div>
<iron-ajax id="ajax" auto url="/data.json" handle-as="json" last-response="{{data}}"></iron-ajax>
<iron-list items="[[data]]" as="item">
<div class="flex">
<template is="dom-repeat" items="{{data}}">
<search-card></search-card>
<span>Hi</span>
<span>[[item.profile]]</span>
</template>
</div>
</iron-list>
</div>
</template>
<script>
(function () {
Polymer({
is: 'search-list',
properties: {
items: {
type: Array,
notify: true,
}
},
ready: function() {
this.items = [];
}
});
})();
</script>
</dom-module>
Search-card is the follwing:
<dom-module id="search-card">
<style>
</style>
<template>
<paper-material style="margin:15px;">
<a href="[[item.profile]]">
<img width="100" height="100" src="[[item.pic]]">
</a>
<div class="">
<div>Name: <span>[[item.name]]</span></div>
<div>Location: <span>[[item.location]]</span></div>
<div>Email: <span>[[item.email]]</span></div>
</div>
</paper-material>
</template>
<script>
(function () {
Polymer({
is: 'search-card',
properties: {
item: {
type: Object,
notify: true,
}
},
ready: function() {
this.item = {}
}
});
})();
</script>
</dom-module>
All the span fields consisting of item data are showing blank. What am I doing wrong ? How to fix it ?

For a start, you have to put the contents of the iron-list element within a template.
<iron-list items="[[data]]" as="item">
<template>
<div class="flex">
<template is="dom-repeat" items="{{data}}">
<search-card></search-card>
<span>Hi</span>
<span>[[item.profile]]</span>
</template>
</div>
</template>
</iron-list>

Related

Meteor Autoform Custom Templates

This is a niche one - hopefully someone has had some experience with this before! Any pointers would be greatly appreciated.
Problem
I'm trying to use Autoform together with Autoform-Semantic-UI and nested custom templates. In the interface, the outer form loads, but when my custom templates load I get console errors referencing that the template cannot access any data, such as:
debug.js:41 Exception in template helper: TypeError: Cannot read property 'type' of undefined
at afArrayTracker.atInitField [as initField]
Exception in template helper: TypeError: Cannot read property 'slice' of null
at Object.autoFormGetLabelForField [as getLabelForField]
Exception in template helper: Error: Invalid field name: (not a string)
at Object.getDefs
This makes my form only partially rendered!
Code
client.js has the schema design:
Schemas = {};
Template.registerHelper("Schemas", Schemas);
Schemas.MarkingScheme = new SimpleSchema({
name: {
type: String,
optional: false
},
description: {
type: String,
optional: true
},
aspects: {
type: Array
},
'aspects.$': {
type: Object
},
'aspects.$.focus': {
type: String
},
'aspects.$.rubric': {
type: Array,
minCount: 1
},
'aspects.$.rubric.$': {
type: Object
},
'aspects.$.rubric.$.mark': {
type: Number
},
'aspects.$.rubric.$.criteria': {
type: String,
optional: true
},
comments: {
type: [String],
optional: true
}
});
Here's the template for the form, which works fine:
<template name="insertScheme">
<div class="ui large header">New Marking Scheme</div>
{{#autoForm schema=Schemas.MarkingScheme id="insertScheme" type="insert"}}
{{> afQuickField name="name"}}
{{> afQuickField name="description"}}
{{> afArrayField name="aspects" template="rubric"}}
{{> afQuickField name="comments"}}
<div class="row">
<div class="centered column">
<div class="two large ui buttons">
<button type="reset" class="ui button">Clear</button>
<div class="or"></div>
<button type="submit" class="positive ui button">Submit</button>
</div>
</div>
</div>
{{/autoForm}}
</template>
Now is where things go south, even though I've reverted to using a near carbon copy of the template used for the semantic-ui autoform package:
<template name="afArrayField_rubric">
<h4 class="ui top attached block header">
{{afFieldLabelText name=this.atts.name}}
</h4>
<div class="ui secondary bottom attached segment">
{{#if afFieldIsInvalid name=this.atts.name}}
<div class="ui pointing red basic label">
{{{afFieldMessage name=this.atts.name}}}
</div>
{{/if}}
{{#afEachArrayItem name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}
<div class="field autoform-array-item">
{{#if afArrayFieldHasMoreThanMinimum name=../atts.name minCount=../atts.minCount maxCount=../atts.maxCount}}
<div class="ui mini red corner label autoform-remove-item">
<i class="icon minus"></i>
</div>
{{/if}}
{{> afArrayField name=this.name label=false options=afOptionsFromSchema template="aspects"}}
</div>
{{/afEachArrayItem}}
{{#if afArrayFieldHasLessThanMaximum name=this.atts.name minCount=this.atts.minCount maxCount=this.atts.maxCount}}
<div class="field">
<div class="ui small green icon button autoform-add-item" data-autoform-field="{{this.atts.name}}" data-autoform-minCount="{{this.atts.minCount}}" data-autoform-maxCount="{{this.atts.maxCount}}">
<i class="icon plus"></i>
</div>
</div>
{{/if}}
</div>
</template>
The idea is that it goes on deeper; but this is as far as we get.
Many thanks for any ideas of things to try!

How do I use Meteor's Spacebar helpers within a template?

Using meteor, I'm trying to populate a list of tasks within a template. This will render the tasks just fine:
<body>
<div class="container">
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
This is a separate template task.html
<template name="task">
<li>{{text}}</li>
</template>
But once I wrap it in a home template so that I may route it appropriately it no longer shows up:
<template name="home">
<body>
<div class="container">
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
</template>
Why is this? Below is the client side js, masterLayout template, and router.js.
Template.body.helpers({
tasks: [
{ text: "This is task 1" },
{ text: "This is sk 2" },
{ text: "This is task 3" }
]
});
<template name="masterLayout">
{{> yield region='nav'}}
<div id="content">
{{> yield}}
</div>
{{> yield region='footer'}}
</template>
Router.map(function() {
this.route('home', {
path: '/',
});
this.route('private');
this.route('testing');
});
I figured it out. You need to change the middle word home to the template you are referencing. https://www.meteor.com/tutorials/blaze/templates
Template.home.helpers({
tasks: [
{ text: "This is task 1" },
{ text: "This is sk 2" },
{ text: "This is task 3" }
]
});

How to add a template dynamically after applyBindings has been called in Knockout js

I am using Knockout JS in my project. I want to include a template after all the bindings are applied.
Example:
<script type="text/javascript" src="ko.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<h2>Participants</h2>
<button onClick="addOnRuntime()">Insert</button>
<div id="ab">Click Me</div>
Here are the participants:
<div data-bind="template: { name: 'person-template', data: buyer }"></div>
<div data-bind="template: { name: 'person-template', data: seller }"></div>
<div data-bind="template: { name: 'person-template', data: killer }"></div>
<script type="text/html" id="person-template">
<h3 data-bind="text: name"></h3>
<p>Credits: <span data-bind="text: credits"></span></p>
</script>
<script type="text/javascript">
function MyViewModel() {
this.buyer = { name: 'Franklin', credits: 250 };
this.seller = { name: 'Mario', credits: 5800 };
this.killer = { name: 'Dj', credits: 10000 };
}
ko.applyBindings(new MyViewModel());
function addOnRuntime()
{
$.ajax({
dataType:'script',
url:'/ab.html',
error:function(jsc){
var temp=document.getElementById("person-template");
temp.innerHTML=jsc.responseText;
ko.cleanNode(temp);
ko.applyBindings(MyViewModel(),temp);
},
success:function(res){
}
});
}
</script>
I want to inject an html within the above block. But when I inject html within it there is no change taking place. I googled a lot and saw that we need to first unbind knockout by using ko.cleanNode(viewModel) and then again apply bindings using ko.applyBindings(viewmodel), but still no change.
This is the html that is getting injected
<h1 data-bind="text: name"></h1>
<p>Credits: <span data-bind="text: credits"></span></p>
This is how it looks after injection of code
<script id="person-template" type="text/html">
<h1 data-bind="text: name"></h1>
<p>Credits: <span data-bind="text: credits"></span></p>
</script>
Try using ko.applyBindingsToDescendants or ko.applyBindingsToNode to newly added html. http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html

How make a ember modal with an id?

Hi i try to make an simple ember app that's get info form a json file. App is located here:http://www.autoroben.nl/m/. Problem is i need the ember view return back an id (from the li element) which i need for handlebars. so i can pop up car info with the same jsonfile as the car list.
// MODAL
App.OpenModal = Ember.View.extend({
click: function(evt) {
var id = $(".lijst li").attr('id');
alert(id)
$('#modal').addClass('active');
}
});
the template
<script type="text/x-handlebars" id="index">
<header class="bar bar-nav">
<h1 class="title">AUTOROBEN</h1>
</header>
<div class="content">
<ul class="table-view lijst">
{{#each}}
<li class="table-view-cell media" id="{{unbound ID}}">
{{#view App.OpenModal}}
<img src="/wp-content/uploads/{{unbound featured_image.attachment_meta.file}}" class="media-object pull-left" width="80">
{{title}}
<p>{{autoinfo.details.bouwjaar}} | {{autoinfo.details.kmstand}}</p>
{{/view}}
</li>
{{/each}}
</ul>
</div>
<div id="modal" class="modal">
<header class="bar bar-nav">
{{#view App.CloseModal}}
<a class="icon icon-close pull-right nostyle" href="#"></a>
{{/view}}
<h1 class="title">{{title}}</h1>
</header>
<div class="content">
<ul class="table-view">
<li class="table-view-divider">DETAILS</li>
<li class="table-view-cell">bouwjaar: {{autoinfo.details.bouwjaar}}</li>
<li class="table-view-cell">kmstand: {{autoinfo.details.kmstand}}</li>
</ul>
</div>
</div>
</script>
json file:
App.IndexRoute = Ember.Route.extend({
model: function() {
return Ember.$.getJSON('http://www.autoroben.nl/wp-json/posts/?type=autos');
}
});
Views in ember js by default get the parent context as its own context. In your case its the context of an single item in the each helper. You can access the ID from the view using the following code.
App.OpenModal = Ember.View.extend({
tagName: 'li',
classNames: ['table-view-cell', 'media'],
click: function(evt) {
alert(this.get('context.ID'));
$('#modal').addClass('active');
}
});
Here is a working bin.

Should Ember.CollectionView's respect layoutName?

Edit: Question rescinded. CollectionViews, as a subclass of ContentViews, do not respect layout, frustrating as that is.
CollectionViews don't seem to work with layouts. For example:
Test case: http://jsfiddle.net/73sWp/
Templates:
<script type="text/x-handlebars" data-template-name="layoutTest">
<div class="my-collection">
<h1>{{title}}</h1>
{{yield}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="layoutTest-child">
<div class="an-item">
Hi there.
</div>
</script>
Script:
var TestView = Ember.CollectionView.extend({
layoutName: "layoutTest",
title: "My Collection",
childViews: [
Ember.View.create({
templateName: 'layoutTest-child'
}),
Ember.View.create({
templateName: 'layoutTest-child'
})
]
});
$(function () {
TestView.create().appendTo(document.body);
});
Expected:
<div class="my-collection">
<h1>My Collection</h1>
<div class="an-item">
Hi there.
</div>
<div class="an-item">
Hi there.
</div>
</div>
Actual:
<div class="an-item">
Hi there.
</div>
<div class="an-item">
Hi there.
</div>
Am I missing something obvious?
Layouts are template based and CollectionViews have been intended to be used without templates.
This issue has been discussed a bit and I think the consensus is that we'd like to support using layouts with ContainerViews.
A pull request has been submitted that adds this functionality: https://github.com/emberjs/ember.js/pull/928