I have a list object which is bound to a UI5 List element. However the values are not showing. Please take a look at my code.
UI/xml Code:
<List id="statementList" headerText="Statements"
items="{ path: 'statementListModel>/' }">
<StandardListItem title="{importance}" description="{importance}"/>
</List>
Binding in JS:
var result = JSON.parse(aData.responseData);
that.getView().byId("statementList").setModel(new JSONModel(), "statementListModel");
that.getView().byId("statementList").getModel("statementListModel").setData(result.statementList);
The list object is built like this:
result= {
statementList = [
{
importance = "ASD",
...
},
{
importance = "BDS",
...
}
]
}
However it is just not showing the content. The list has the correct size so the binding somewhat works but the content binding does not work:
Thanks for any help!
You have to add the model name EVERYWHERE:
<StandardListItem title="{statementListModel>importance}" description="{statementListModel>importance}"/>
Related
I'm using Knockout 3 with the plugin jqAutocomplete by Ryan Niemeyer. I have a problem with this model:
var ViewModel = function() {
var self = this;
self.myOptionsObs = ko.observableArray([
{ id: ko.observable(1), name: ko.observable("item 1 o"), description: ko.observable("item label 1 o") },
{ id: ko.observable(2), name: ko.observable("item 2 o"), description: ko.observable("item label 2 o") },
{ id: ko.observable(3), name: ko.observable("item 3 o"), description: ko.observable("item label 3 o") }
]);
self.myValueObs = ko.observable();
};
ko.applyBindings(new ViewModel());
<input data-bind="jqAuto: { source: myOptionsObs, value: myValueObs, inputProp: 'name', template: 'itemTmpl' }" />
As you can see, there is an observable array and each element is also an observable.
The autocomplete don't work well. As you can see in this Fiddle, the left column has an observable array but its elements aren't observable. If you click in the left box and write something, a list of options appear.
But in the right column, you have the same, but the element's are all observable. If you click in the right box and write something, when the list appear, if you move the cursor up and down, you could see that the row 'name' gets deleted and filled with zeros.
What I have to change in my data-bind attribute?
This question is related with this question.
I have to say that this solution works ok for me. But the updated plugin don't.
Thanks !!
The jqAutoComplete plugin isn't setup to work with observable properties (although it could be enhanced to do so without much work).
For now, I think that your best bet is to create a computed that will always return a plain and up-to-date version of your options.
self.myOptionsObs.plain = ko.computed(function() {
return ko.toJS(self.myOptionsObs);
});
Sample: http://jsfiddle.net/rniemeyer/45cepL9b/
I'll try to take a look at some point about supporting observable properties. Shouldn't take many changes.
I am working on a project to convert some of the rails view layer to ReactJS. One of the challenge that I have is to render a list of dynamic type of objects (Objects are using STI).
for example, I am trying to render a bag of fruits, and each fruit has a specific partial views in rails. In rails, I would do
fruits.each do |fruit|
#fruit.type could be orange, apple, banana, etc.
render 'fruits/' + fruit.type
end
How do i do this in ReactJS? Is it possible?
You can just create an object.
var things = {
foo: FooComponent, ...
};
And then get a component from that.
var key = 'foo';
var Component = things[key];
return <Component />
Note that the variable must start with an uppercase letter if you're using jsx, otherwise it will assume you mean the html element <component></component>.
Or don't use jsx here.
React.creatElement(things[key], null);
Without additional information on where you need to do this, I'm going to assume you need it at render time, in which case: just do the same thing in JavaScript.
.....React.createClass({
...
getInitialState: function() {
return {
fruits: this.props.fruits || []
};
},
...
render: function() {
var fruits = this.state.fruits.map(function(f) {
return <li>{f.type}</li>;
});
return <ul>{fruits}</ul>;
},
...
});
I have this json model:
model/data.json
{
"orders" : [
{
"header" : { "id" : "00001", "description" : "This is the first order" },
"items" : [
{ "name" : "Red Book","id" : "XXYYZZ" },
{ "name" : "Yellow Book", "id" : "AACCXX" },
{ "name" : "Black Book", "id" : "UUEEAA" },
]
},
{
// another order with header + items
},
.....
]
}
and I'm assigning it onInit to the view, like this:
var model = new sap.ui.model.json.JSONModel("model/data.json");
sap.ui.getCore().setModel(reqModel);
I'm trying to display a list of orders in the first view (showing the id), like this:
var list = new sap.m.List({
id: "mainList",
items: []
});
var items = new sap.m.ActionListItem({
text : "{id}",
press : [ //click handler, onclick load the order details page ]
});
list.bindItems("/orders", items);
.... // add list to the page etc etc
What I cannot do, is connect each order to its header->id.. I tried
text: "/header/{id}"
text: "{/header/id}"
in the items declaration, and
list.bindItems("/orders/header", items)
in the list binding, but none of them works.. The id value is not displayed, even though a "blank" list item is shown..
Any idea? What am I doing wrong?
Thank you
The solution was one of those I tried (but I don't know why it didn't work at that time)
text: "{/header/id}"
The ListItem acts as a Template for a list/array of objects. That's why you bind it against an array structure in your data:
list.bindItems("/orders", itemTemplate)
That makes bindings of the ListItem relative to /orders and therefore your item should look like this without leading '/' (absolute paths would look like this /orders/0/header/id asf.):
var itemTemplate = new sap.m.ActionListItem({
text : "{header/id}",
press : [ //click handler, onclick load the order details page ]
});
Not quite sure how you made it work the way you have shown... May be it's not as picky as I thought.
Btw: For whatever reason the ResourceModel builds an exception of that syntax. You can always omit the leading '/' when dealing with ResourceModels (probably because they do not allow nested structures).
BR
Chris
Cannot add comments yet, therefore an answer to you solved Problem, that could answer the initial problem. (And inform People using that example in any way)
In the current code listing you use the variable "reqModel" to set the model, but the variable with the model in it is named "model" in the line before. Maybe that was the first reason why both of your examles would not work?
Perhaps this error was cleared on rewriting some passages while testing.
greetings! -nx
I want to create an e4x object.
The I want to dynamically keep adding attributes for it and also add value later.
e.g
var node = <node />;
//some code
1) add attribute to 'node'
2) add value to 'node'
Also I found such examples for Flex3 but none for Javascript. Any further documentation would also be appreciated
if you want to add an attribute or value
var node = <node/>
node.#id = 123
node.toXMLString()
//returns
//<node id="123"/>
if you would like to add attributes named dynamically then use the square brackets
node.#["prioritory"] = "high"
//returns
//<node id="123" prioritory="high"/>
the same works for adding child elements
node.description = "Warning"
node.toXMLString()
//<node id="123" prioritory="high">
// <description>Warning</description>
//</node>
node["location"] = "R23"
node.toXMLString()
//<node id="123" prioritory="high">
// <description>Warning</description>
// <location>R23</location>
//</node>
I find this link helpful when trying to refresh my e4x http://wso2.org/project/mashup/0.2/docs/e4xquickstart.html
I'm struggling to get a g:each tag to work. What I'm passing to the view is a list of hashmaps (something like this [ [ : ] , [ : ] ] ).
Each hashmap is of the form [location: somelocation , artist: someartist].
The code is the following:
CONTROLLER
in the controller I'm passing the following:
[searchedResults : results.searchedResults]
VIEW
<g:each status="i" in="${searchedResults}" var="results">
if(results.location!=null){
var point${results.location.id} = new google.maps.LatLng(${results.location.lat}, ${results.location.lng});
var myMarkerOptions${results.location.id} = {
position: point${results.location.id},
map: map
};
var marker${results.location.id} = new google.maps.Marker(myMarkerOptions${results.location.id});
}
</g:each>
Any ideas why this wouldn't work?
Thanks!
GrailsGuy is right in that you can't write groovy code in the body of an each tag like that. But let me try and convert it to something for you, since it looks like your doing some javascript in there as well...I think all you need to fix is your if statement
<g:each status="i" in="${searchedResults}" var="results">
<g:if test="${results.location}">
//everything else seems like it would work, assuming your javascript
// code is accurate
</g:if>
</g:each>