I am wanting to provide a dynamic set of items to a Polymer paper-dropdown-menu. I can get the dynamic items to show up, but clicking them does nothing.
View:
<paper-dropdown-menu label="Your favourite pastry">
<paper-menu class="dropdown-content" selected.two-way="favPastry" attr-for-selected="value">
<!-- Begin works when selected -->
<paper-item value="Croissant">Croissant</paper-item>
<paper-item value="Donut">Donut</paper-item>
<paper-item value="Financier">Financier</paper-item>
<paper-item value="Madeleine">Madeleine</paper-item>
<!-- End works when selected -->
<!-- Begin does not work when selected -->
<paper-item repeat.for="pastry of pastries" value="${pastry}">${pastry}</paper-item>
<!-- End does not work when selected -->
</paper-menu>
</paper-dropdown-menu>
View-model:
pastries = [ "Bear Claw", "Pie" ];
favPastry = "Donut";
How can I provide a dynamic list of items to a paper-dropdown-menu in an Aurelia application?
To create the paper-items out of your array, you'll have to use a <template is="dom-repeat"> as described here: https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-repeat
Related
I'm using Odoo V12 CE and my issue is I try to edit a PageA view.
Have some PageA, PageB and more, inherit ParentPage.
I want to inherit ParentPage into PageA to add some content and, PageB must be: PageB = ParentPage(without modifications from PageA) + PageB.
Helps please and thanks for all!!
<template id="tpml_id" inherit_id="parent.tpml_parent_id" name="Posts">
<xpath expr="//ul[#id='post-list']" position="after">
<span>This is my posts list for all page (MyPage and all page inherits ParentPage). It's so bad. </span>
</xpath>
</template>
<!-- I want this -->
<template id="tpml_id" copy_inherit_id="parent.tpml_parent_id" name="Posts">
<xpath expr="//ul[#id='post-list']" position="after">
<span>This is my post list for this page only. </span>
</xpath>
</template>
If you want to inherit view but do not want to add anything in parent.tpml_parent_id then you can write as following :
<template id="tpml_id" inherit_id="parent.tpml_parent_id" name="Posts" primary="True">
<xpath expr="//ul[#id='post-list']" position="after">
<span>This is my post list for this page only. </span>
</xpath>
</template>
I have a for that will create a component for each index.
In this component, I have a child div containing edit, add, minus buttons.
I would like it to be displayed on the component mouseover.
How do I achieve this dynamically without having to play with indexes ?
Thank you kindly.
Post component
<template>
<div v-on:mouseleave.native="showOperations = false"
v-on:mouseover.native="showOperations = true">
<!-- post data -->
<div v-if="showOperations">
<!-- operations -->
</div>
</div>
</template>
<script>
export default {
...
data () {
return {
showOperations: false
}
},
...
</script>
List of post
<post v-for="post in posts"
:key="post.id"
:post="post">
</post>
This pattern works for me and I think it works for you as well
For example we have codes like :
<!-- ko ifnot: product().bannerImageVideoLink -->
<img data-bind="attr: {src: product().largeImageURLs()[0] }">
<!-- /ko -->
Is there any way to debug into the code in html so that I can see what inside product() is ?
I always use a browser add-on for this like:
Knockout context debugger extension for Chrome dev tools
FireKnockout add-on for Firefox
Install the extension, browse up to the point where you want to debug your app, select the element in the browser's dev-tools and find the current state in detail in the extension tab.
how about ko.toJSON
from http://knockoutjs.com/documentation/json-data.html
Note that ko.toJSON accepts the same arguments as JSON.stringify. For
example, it can be useful to have a “live” representation of your view
model data when debugging a Knockout application. To generate a nicely
formatted display for this purpose, you can pass the spaces argument
into ko.toJSON and bind against your view model like
run snippet below
var product = {
'foo': 'bar',
'largeImageUrls': ['image1', 'image2', 'image3', 'image4'],
'bannerImageVideoLink': true
}
function viewModel() {
var self = this;
this.product = ko.observable(ko.mapping.fromJS(product));
};
var vm = new viewModel();
$(document).ready(function() {
ko.applyBindings(vm);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<!-- ko ifnot: product().bannerImageVideoLink -->
<img data-bind="attr: {src: product().largeImageURLs()[0] }">
<!-- /ko -->
debugger....
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
The way I do this is by calling a function which uses the browsers debugger like this...
<!-- ko if: function(){debugger;}() --><!-- /ko -->
so if you add that just before your code like this...
<!-- ko if: function(){debugger;}() --><!-- /ko -->
<!-- ko ifnot: product().bannerImageVideoLink -->
<img data-bind="attr: {src: product().largeImageURLs()[0] }">
<!-- /ko -->
...then run the page with the chrome developer tools window open. Your browser will hit a breakpoint on that line. You can then inspect the $data variable in your console. This variable will contain the data being bound by knockout which in this case is the model.
You can see this in action by looking at this jsfiddle with your dev tools window open (F12)
https://jsfiddle.net/fa3x9o2s/
Here's example from Steve Sanderson's blog demonstrating a containerless IF statement in knockout:
<h3>Products</h3>
<ul>
<li><strong>Here is a static header item</strong></li>
<!-- ko foreach: products -->
<li>
<em data-bind="text: name"></em>
<!-- ko if: manufacturer -->
— made by <span data-bind="text: manufacturer.company"></span>
<!-- /ko -->
</li>
<!-- /ko -->
</ul>
How would I make the IF statement more complex. I am trying the following and it doesn't work (always returns false):
<!-- ko if: PlanStateName == 'Draft' -->
<div>This plan is a draft!</div>
<!-- /ko -->
How would one accomplish this?
So it turns out I made a rookie mistake. Here's the working code:
<!-- ko if: PlanStateName() == 'Draft' -->
<div>This plan is a draft!</div>
<!-- /ko -->
Since the variables are wrappered by knockout, the parentheses on PlanStateName are required to access the underlying data.
You need to surround the logical statement with {}.
See http://jsfiddle.net/photo_tom/nvYdf/55/
i dev a Firefox extension and i try to add a tabpanel in a tabbox (xul).
The tabbox:
<tabbox id="tbDashboard" selectedIndex="0" >
<tabs><!-- list of tabs -->
<tab label="Overview"/> <!-- default tab -->
<tab label="test"/>
</tabs>
<tabpanels><!-- list of contents -->
<tabpanel ><!-- default tab's content -->
<box orient="horizontal" flex="1">
<description style="font-size: 24pt;">overview</description>
</box>
</tabpanel>
<tabpanel ><!-- test tab's content -->
<box orient="horizontal" flex="1">
<description style="font-size: 24pt;">test</description>
</box>
</tabpanel>
</tabpanel>
</tabpanels>
</tabbox>
I can add a new tab in JS with:
document.getElementById("tbDashboard")["tabs"].appendItem("popo");
The tab is appears but the tab page is empty, i tried to:
use appendItem with a second parameter => don't work
document.getElementById("tbDashboard")["tabpanels"].appendItem(...) => fail
Someone have an idea to create the tab page (a tabpanel) ??
thx
tabs.appendItem() is merely a convenient helper to create a tab element. It is essentially the same as:
var tabbox = document.getElementById("tbDashboard");
var tab = document.createElement("tab");
tab.textContent = "popo";
tabbox.tabs.appendChild(tab);
You can create and add a tabpanel element in the same way (here with a text box as only contents):
var panel = document.createElement("tabpanel");
panel.appendChild(document.createElement("textbox"));
tabbox.tabpanels.appendChild(panel);
For a tutorial on DOM manipulation see https://developer.mozilla.org/en/XUL_Tutorial/Modifying_a_XUL_Interface.
You'll need to create the panel using the DOM API and then append it to your XUL document, e.g.:
let newPanel = document.createElement("tabpanel");
let panelContent = document.createElement("hbox");
// Add more content here
newPanel.appendChild(panelContent);
document.getElementById("tbDashboard").tabPanels.appendChild(newPanel);