I have the following model (see my previous question):
slide: {
"id": 1,
"name": "stack-overflow-page",
"type": "webpage",
"parameters": [
{"key": "url", "value": "http://stackoverflow.com"},
{"key": "extension", "value": "/questions/ask"}
]
}
Each parameter has metadata, depending on the slide type:
widget: {
"id": "webpage",
"description": "Renders a webpage.",
"parameters": [
{"key": "url", "type": "string", "description": "The base URL to show."},
{"key": "extension", "type": "string", "description": "The rest of the URL to attach, or any parameters."}
]
}
Currently, the "widget" metadata is loaded in the controller (note: ember-cli is used here):
import Ember from 'ember';
export default Ember.ObjectController.extend({
widget: function() {
return this.store.find('widget', this.get('model.type'));
}.property('model.type'),
});
However, when using the parameters in the template, I see no way to look up the metadata information for each parameter (for example, to show the parameter's description).
{{#each parameters}}
<div class="form-group">
<label class="col-sm-2">{{key}}</label>
<div class="col-sm-10">
{{input type="text" value=value class="form-control"}}
</div>
</div>
{{/each}}
Additionally, if I attached the metadata to each parameter in the model, I assume it would be sent back to the server unnecessarily, since parameters is simply a DS.attr(). Is there a good way to look up the metadata information for each parameter?
I believe the EmbeddedRecord Mixin is what you're looking for. It was just abstracted out of the Active Model serializer and added to the generic REST serializer in the most recent EmberData beta (Ember Data v1.0.0-beta.8), so you may need to upgrade to use it. You'll still need to create a DS.Model for 'parameters' with two fields 'key' and 'value' for this to serialize correctly.
You can use the extractMeta hook from the JSON or REST Serializer -> https://github.com/emberjs/data/blob/master/packages/ember-data/lib/serializers/json_serializer.js#L945 to parse your meta information.
If you want to access the metaData on your manyArray, you will need this patch -> https://github.com/emberjs/data/commit/8544c29419d1ef909762a50beb434c219a34c846
I completely forgot about it, I can merge it in a day or two so you don't have to edit ED yourself.
Related
I am really new to JSS and I am very confused by the docs and how Sitecore is supposed to assemble layout information. I am trying to retrieve layout information of an item using JSS for one of our MVC project. The item in question renders fine in the browser using our traditionnal MVC stack. However I am unable to retrieve layout information of that item using JSS.
The item in question is based on the standard template and has the following presentation/layout details:
The layout points to a cshtml file.
The cshtml file contains the HTML layout, and a placeholder rendered using #Html.Sitecore().Placeholder("Menu")
The content of the placeholder is defined in Sitecore Layout Details dialog using a control/rendering named "Menu".
The rendering "Menu" points to a controller named Web.Controllers.MenuController and action named GetMenu
Content of the cshtml file:
#using Sitecore.Mvc
<main id="main" class="content group advise-area" role="main">
<div class="inner inner-carousel advise-area-content">
<div class="row">
<div class="col-2-2">
#Html.Sitecore().Placeholder("Menu")
</div>
<div class="col-2-2">
#Html.Raw(Model.Content)
</div>
</div>
</div>
</main>
When retrieving the layout information of the item using the render endpoint (/sitecore/api/layout/render/jss?item={item_id}&...). I get the fields values of the item, but I do not get any presentation details nor placeholder information.
{
"sitecore": {
"context": {
"pageEditing": false,
"site": {
"name": null
},
"pageState": "normal",
"language": "fr",
"itemPath": "/my-item"
},
"route": {
"name": "prendre-route-securite",
"displayName": "prendre-la-route-en-toute-securite",
"fields": {"Content": {"value": "My Content"}},
"databaseName": "web",
"deviceId": "fe5d7fdf-89c0-4d99-9aa3-b5fbd009c9f3",
"itemId": "85cac673-2cfb-496c-ba62-0f1d634ae241",
"itemLanguage": "fr",
"itemVersion": 1,
"layoutId": "b39337a1-8bb5-44c3-ba97-0dce8ef517f6",
"templateId": "34c34e2b-f2ac-405f-afb3-d0185bc936bb",
"templateName": "ArticleZoneConseils",
"placeholders": {}
}
}
}
The documentation says I am supposed to put some values inside the Layout Service Placeholders field of the layout. But I have no clue of what I should put in there to get the placeholder data showing in the REST query.
This is a followup question on VUEJS remove Element From Lists?, where they give various methods (this.$remove, splice, this.$delete) for dynamically removing a element from a list. I was trying to understand how to apply this to a nested loop; here's mine in three+ levels, somewhat stripped-down:
<template v-for="(labtype,index) in labIRlist">
<template v-for="(lab,index2) in labtype">
<tr v-for="(IR,index3) in lab.irs" :key="IR.irn">
<td><p>{{ lab.hidtxt }}_{{ lab.mnem }}</p></td>
<td><p>{{ lab.PNL }}</p></td>
<td><p>{{ IR.provider}} {{ IR.psurv }}</p></td>
<td><p>{{ IR.year }}-{{ IR.eventno }}</p></td>
<td><p>{{ IR.analytes }}</p></td>
<td><p>
<button type="button"
#click="deleteIR(IR.irn,index,index2,index3)">
DELETE
</button>
</p></td>
</tr>
</template>
</template>
Then there's Javascript for the deletion
methods: {
deleteIR: function(IRNum,index,index2,index3) {
// okay, delete!
//... code to do something at the database...
alert('IR successfully deleted!')
// don't show the deleted IR any more
this.labIRlist[index][index2].irs.splice(index3,1);
},
Awful, but I didn't know how to identify the correct element. And it still didn't work (AFAIK it does nothing, no change visible to the row). How should this be done - don't we know the right element from where deleteIR was called?
What is the better way to handle deleting an element within multiple
loops?
First of all, looking at how your template is built, we can assume that your data looks something like this:
labIRlist: [
[
{
hidtxt: "TEXT 1",
irs: [{ provider: "provider1" }, { provider: "provider11" }],
irn: "irn1",
},
{
hidtxt: "TEXT 2",
irs: [
{ provider: "provider2" },
{ provider: "provider22" },
{ provider: "provider222" },
],
irn: "irn2",
},
],
[
{
hidtxt: "TEXT 3",
irs: [{ provider: "provider3" }],
irn: "irn3",
},
],
],
If you want to delete one item from the nested irs array, all you need to do is to pass the irs array and the index of the item you want to delete, no need to do the whole path you are doing currently:
this.labIRlist[index][index2].irs.splice(index3,1);
So change your template to:
<button type="button" #click="deleteIR(lab.irs, index3)">
And the delete function is then simply:
deleteIR(IRS, index) {
IRS.splice(index, 1);
}
A DEMO for your reference
PS. Please always share a bit of your data when posting questions like this. Much easier to answer when not needing to create your own sample data like I did here.
So I have an API that generates forms from a database. The API for the fields returns:
{
"formFields": [
{
"module": 1,
"fieldName": "Global Title",
"fieldPosition": "1",
"fieldType": "select",
"fieldEditable": true,
"dataTable": "message",
"dataKey": "calling_gt",
"dataValue": "id",
"id": 1,
"createdAt": "2015-10-15T13:59:30.764Z",
"updatedAt": "2015-10-15T13:59:30.764Z"
}
]
}
I have multiple Ember components. Essentially an Add Parameter component that loops through the fields related to the component. Below is loading the select component passing in the Model from the database table and the fields to use for the Key->Value:
{{#each model.fields as |field|}}
{{#if (eq field.fieldType "select")}}
{{form/select-field model=field.dataTable label=field.fieldName key=field.dataKey value=field.dataValue selected=1}}
{{/if}}
{{/each}}
The select-field component then generates a select that brings out the Model data from the values provided in the Add Parameter component, like so:
<div class="form-group">
<label for="{{key}}">{{label}}</label>
{{#x-select value=optionValue action="selectOption" class="form-control" id=key}}
{{#each componentModel as |option|}}
{{#x-option value=option.calling_gt}}{{option.calling_gt}}{{/x-option}}
{{/each}}
{{/x-select}}
</div>
But as you can see, in x-option, I'm currently hard-coding the values, where they should be using the key=field.dataKey. But as I'm looping through and my componentModel -> Options don't hold that variable, I'm not sure how to pass it into the x-option value.
My component.js for select-field looks like this, if it helps:
import Ember from 'ember';
export default Ember.Component.extend({
componentModel: function() {
return this.store.findAll(this.get('model'));
}.property(),
actions: {
selectOption(value, component) {
Ember.Logger.debug("Option " + component + " with value " + value + " selected");
this.set('optionValue', value);
}
},
});
Does anyone know how to bring out the data using the key and value passed into the select-field component?
Sounds like you might be able to use the get helper. http://emberjs.com/api/classes/Ember.Templates.helpers.html#method_get
{{#x-option value=(get option key)}}
{{get option key}}
{{/x-option}}
I've got basically two arrays of objects in one view:
App.List = Ember.View.extend({
students: [{ "name": "yehuda" }, { "name": "tom" }],
teacher: [{ "name": "mr. katz" }, { "name": "mr. dale" }]
});
My handlebars look something like this:
{{#each teacher}}
<li class="teacher">{{name}}</li>
{{#each students}}
// display students for this teacher
{{/each}}
}}
The obvious problem here is, that the students-array is not within the teacher-array but on the same "level". So how can I access the students-array?
Thanks!
It seems to be related to the view context, try to use {{view.students}}, I think it should work.
jsfiddle updated against comments: http://jsfiddle.net/Sly7/gdXfN/
I am new in django and now i am trying to iterate one json dictionary in html page. I am using the {{context}} for displaying the dictionary which is passed from the view and context is the variable used to store the dictionary in render_to_response. now it is diplayed like
[
{
"pk": 5,
"model": "Auction.newauction",
"fields": {
"username": 1,
"category": "furniture",
"description": "Made of Wood",
"end_date": "2012-05-01 11:00:00",
"start_price": "100",
"title": "Table",
"start_date": "2012-03-04 11:24:11"
}
}
]
How I can iterate this dictionary to display like
username : 1
category : Furniture
Can anyone please help me
You shouldn't "convert it to JSON" unless you're planning to have your logic in Javascript. Instead, in your template you could iterate over the array in a for loop and traverse the dictionary to the username and category keys:
{% for c in context %}
<div>username: {{ c.fields.username }}</div>
<div>category: {{ c.fields.category }}</div>
{% endfor %}