I'm able to display one row into myField but i want to loop through all rows.
I want to display all names in a formatted text in html. i think something with for-each in my HTML View, but im really stuck here.
My JSON from couchDB looks like this:
{"total_rows":8,"offset":0,"rows":[
{"id":"f1abbf3ccb0f15d6a66f7eadab003f53","key":"AccessBareBoneApp","value":{"Properties":{"Properties":[]},"Implements":{"Interfaces":[{"TypeName":"ITSR2.Bricks.Access.IAccessBareBoneBrick"},{"TypeName":"ITSR2.Bricks.Access.IAccessAppBrick"}]},"Name":"AccessBareBoneApp","Description":"","TypeName":"ITSR2.Bricks.Access.AccessBareBoneApp","AssemblyName":"ITSR2.Bricks.MSOffice, Version=3.0.0.0, Culture=neutral, PublicKeyToken=null","Obsolete":false}},
My main.js file:
function ViewModel() {
var self = this;
self.myfield = ko.observableArray([]);
}
var db = new PouchDB('http://localhost:5984/helloworld');
var vm = new ViewModel();
db.query("bricksetup/docs").then(function(result) {
var data = result;
console.log(data);
data.rows.forEach(function(row){
vm.data.push(row.value)
// vm.myfield(data.rows[3].value.Name);
// vm.myfield2(data.rows[2].value.Name);
})
vm.myfield(data.rows[3].value.Name);
});
ko.applyBindings(vm);
My index.html:
<h3>Brick Infos</h3>
<div data-bind="">
<p>
<b>Name:</b>
<span data-bind="text:myfield"></span>
<b>Description:</b>
<span data-bind=></span>
<b>TypeName:</b>
<span data-bind=></span>
<b>AssemblyName</b>
<span data-bind=></span>
<b>Obsolete</b>
<span data-bind=></span>
</p>
<p data-bind=>
<b>Name:</b>
<span data-bind=></span> |
<b>Validation Type:</b>
<span data-bind=></span><br>
</p>
</div>
You just need to pass the data.rows to your variable myField like this vm.myfield(data.rows); . Place it under your console.log and remove the forEach Loop.
And on Index.html:
<div data-bind="foreach:myfield">
<span data-bind="text:value.Name"></span>
</div
Hope this helps
You need to do more work on the Javascript side and assuming there is going to be more than one row then assign that to a ko.observableArray. Is that what self.myfield is for?
Assuming yes, then set up the self.myfield using something like self.myfield(data.rows). nice and simple and no need for all that pushing!
On the HTML side, for each row you need a data-bind e.g.
<h3>Brick Infos</h3>
<div data-bind="foreach: self.myfield">
I think this will work - I use ES6 Javascript so I don't have to use self = this, I would just use foreach: myfield
The rest of the html is not using proper data-bind syntax. Each field would need something like <p><span class="title">Field Title</span><span class=text data-bind="text: data.fieldName"></span></p>
Then create a css class to highlight the title and replace Field Title with whatever you want to appear to the user as the title of the field, and replace Fieldname with the relevant fieldname e.g. Name, Description, TypeName etc.
Note items which which have multiple values possible such as Implements.Interfaces use data-bind=:foreach data.Implements.Interfaces to repeat those items if needed on the page.
You're pushing into vm.data, but the observableArray field is myfield. Then you're setting the value of the observableArray to the Name field of one data item. That's a very confused approach.
It looks like your query is going to come back with a result that contains rows, which are (more or less) what you want in your array.
db.query("bricksetup/docs").then(function(result) {
vm.myfield(result.rows);
});
It also looks like each row has a value object, and the fields you're interested in are inside that.
<h3>Brick Infos</h3>
<div data-bind="foreach:myfield">
<b>Name:</b>
<span data-bind="text:value.Name"></span>
</div>
This should get you started with the fewest lines of code. You'll probably want to re-map the rows to just put the value object into myfield.
Related
I am trying to organize a bunch of id tags, I would like to be able to set up a single JavaScript variable which holds all manner of interesting information. One place I would like to use it, is to set the value of an id field in an HTML tag
<script>
var messageID = { idText: "message1", other: "qwerty"};
</script>
<div id="message0">Text Zero</div>
<div id="JavaScript.messageID.idText">Text One</div> <!-- abject failure -->
So basically I want the messageID.idText value to be the id value: id="message1". Obviously the example fails in the second div line. Is there a way to do this?
Edit:
Ok, I want to be able to use the value of messageID.idText elsewhere in the system, such as
var elementTag = document.getElementById(messageID.idText);
I use the id in many places, and the more there are, the better a chance of mis-typing something. This is not a small project :-)
So I am going with:
<?php
$msgOneId = "message1";
?>
<script>
var messageID = { idText: "<?=$msgOneId?>", other: "qwerty"};
</script>
<div id="message0">Text Zero</div>
<div id="<?=$msgOneId?>">Text One</div>
and then
var elementTag = document.getElementById(messageID.idText);
works
I got the following HTML:
<div id="editable_phrase">
<span data-id="42">My</span>
<span data-id="43">very</span>
<span data-id="1">first</span>
<span data-id="21">phrase</span>
</div>
and I need to get the data-id attributes when I select (highlight) with a mouse these words. I use the following code:
var data = window.getSelection().getRangeAt(0).cloneContents();//this gets the data for all selected words
console.log(data);
It works fine except that when I select last word phrase, it selects only text without html contents. Any ideas how to fix that? I can use jQuery.
If I select 2 or 3 words, I need to get their data-ids respectively to each word, as it is with getRangeAt(0).cloneContents(). The problem is only with the last word, which does not return HTML code.
Thank you.
EDIT:
There has been a similar thread before, here is a working solution:
https://jsfiddle.net/hallleron/wg1pbwbf/2/
Basically you loop through the siblings in the selection to get each value and then parse the array as string to display it in my result paragraph for better visuals.
ORIGINAL:
If you want a jQuery-free version, here is a fiddle: https://jsfiddle.net/hallleron/wg1pbwbf/
The whole Javascript Part is the following:
document.getElementById('editable_phrase').addEventListener("click", getDataId);
function getDataId(){
console.log(window.getSelection().anchorNode.parentElement.attributes[0].nodeValue);
}
So every time the event listener detects a click, it gets the selected text/span and extracts its data-id attribute from the object.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editable_phrase">
<span data-id="42">My</span>
<span data-id="43">very</span>
<span data-id="1">first</span>
<span data-id="21">phrase</span>
</div>
<script>
$('#editable_phrase').on('click','span',function(){
var res = $(this).attr('data-id');
alert(res);
})
</script>
hi it's a cordova app that use devexpress framework based on knockout i need to set visible only one item in a list
the item should correspond to the param.id or this
id_agenzia:ko.observable(params.id),
i've tryed with jquery (setting the id "#"+$data.id_agenzia visible if == id_agenzia ) but if i integrate it doesn't work
the goal is to do something like this
if i put this line it ignores
how is the right way to set visible only the div that corresponds to $data.id_agenzia is valid for $data.id_agenzia==id_agenzia ?
thank you for help
this is the js code with jsfiddle code added
self.selected_id_agenzia = ko.observable('two');
self.jsonLista = ko.observableArray([
{id_agenzia:ko.observable('one'), nome:'N1'},
{id_agenzia:ko.observable('two'), nome:'N2'}
noDataLabel: noDataLabel,
this is the html code with jsfiddle code added
<div class="list-indentation" data-bind="foreach:jsonLista" style="padding-bottom:60px;">
<div id="$data.id_agenzia" data-bind="visible: id_agenzia()==selected_id_agenzia()">
<div class="agency-description-box" >
<span data-bind="text: $data.id_agenzia" class="agency-name"></span>
<span data-bind="text: $data.nome" class="agency-name"></span>
</div>
</div>
</div>
I think I misunderstood what you were doing with the variables. I have made a simplified fiddle to do what I think you want. To make it work:
I assumed a dxList was more or less like a foreach
I changed the name of the outer id_agenzia to selected_id_agenzia, as I was not able to get the comparison to work using $data and $root to distinguish them
I made both items ko.observables, and used the function call on each in the comparison
</div>
The code is all at the fiddle:
http://jsfiddle.net/3ktq4b9s/
I'm trying to make a javascript function that displays different string every 7 days for example. And I want to display that string in a footer of an html.
The part that bugs me is how to insert that string in a paragraph in html (or anything that will display the text).
I have 2 dimensional array in .js, let's say:
array = [[first1,first2],[second1,second2],[third1,third2],[fourth1,fourth2],[fifth1,fifth2]];
And I want do display, let's say
array[2][0] in one paragraph and
array[2][1] in another paragraph.
let's say
<div>
<p>In here i want array[2][0]</p>
<p>In here i want array[2][1]</p>
</div>
Please help.
HTML:
<div>
<p>In here i want <span id="placeholder-1"></span></p>
<p>In here i want <span id="placeholder-2"></span></p>
</div>
JS:
document.getElementById('placeholder-1').innerHTML = array[2][0];
document.getElementById('placeholder-2').innerHTML = array[2][1];
Fiddle: http://jsfiddle.net/8N95j/
select the html element by document.getElementById/getElementsByClassName and attach the js value like
var ele = document.getElementById('footerid');
ele.innerHTML += array[2][0];
note: getElementsByClassName would give u an array
update
here is a working fiddle using the same markup u shared.
One different approach would be to use a framework like Ember or AngularJS. These are quite easy to put in place nowadays, and leads to much easier to maintain code. For instance, your HTML would look like
<div ng-controller='MyController'>
<p>In here i want {{ array[2][0] }}</p>
<p>In here i want {{ array[2][1] }}</p>
</div>
where MyController references an AngularJS controller (basically a simple javascript object which defines a $scope in which the array is defined.
At that point, you no longer need to update the HTML, ever. Whenever your javascript does something like array[2][0] = 'foo' the HTML is automatically updated in real-time.
Use the below code to dynamically create a p tag and append it in a container div
HTML :
<div id="container">
<p>In here i want Test1</p>
</div>
JS :
var array = [['first1','first2'],['second1','second2'],['third1','third2'],['fourth1','fourth2'],['fifth1','fifth2']];
//If needed for loop can start here
var para = document.createElement("p");
para.innerHTML = 'In here i want ' + array[2][0];
document.getElementById('container').appendChild(para);
DEMO
At work I'm just starting out with JavaScript, MVVM, and Kendo's JS framework, all at once, and I have a fairly simple problem.
I've created a View Model that allows Superheroes to be registered.
The JSBin I'm working in: http://jsbin.com/gewu/3/edit?html,js,output
Here's the HTML(view):
<div id="view">
Superhero: <input data-bind="value: name" /><br/>
Superpower: <input data-bind="value:power"type="text">
<label for="">from Earth?<input type="checkbox" data-bind="checked:fromEarth"></label>
<button data-bind="click: registerHero" >Display User Info</button>
<div id="array-display"></div>
<p>Entries: <span data-bind="text: knownHeroes.length"></span></p>
</div>
And here's the JS (viewModel):
var viewModel = kendo.observable({
knownHeroes : [],
name: "Hulk",
power:"Stength",
fromEarth: true,
registerHero: function() {
var name = this.get("name");
var power = this.get("power");
var fromEarth = this.get("fromEarth");
this.knownHeroes.push({"name":name,"power":power,"fromEarth":fromEarth});
}
});
kendo.bind($("#view"), viewModel);
Now, I'm trying to get the View to loop through and display the array of knownHeroes. But it won't render anything. I know the data is being pushed to the array, because I can see the array.length increasing, and I can look up specific values in the array. I'm assuming the problem has to do with how I'm referencing the array in the view. But I'm not sure. Here's the template I've written:
HTML:
<script id="registry-view" type="text/x-kendo-template">
<ul>
# for (var i=0; i < knownHeroes.length; i++) { #
<li>
<ul>
<li>#= knownHeroes[i].name #</li>
<li>#= knownHeroes[i].power #</li>
<li>#= knownHeroes[i].fromEarth #</li>
</ul>
</li>
# } #
</ul>
</script>
<script type="text/javascript">
var template = kendo.template($("#registry-view").html());
$("#array-display").html(template); //Append the result
</script>
You have got some mistakes.
First of all you got script wrote in html portion of this jsbin as well as in javascript section. Html part executes first so the viewModel isn't defined yet (check console for errors)
Also the object you pass to the template is stored always in "data" variable.
Last mistake is when using your desing, anytime you add any new data row, whole template needs to be reloaded (including all previously added data rows)
I corrected some of your mistakes in following jsbin: http://jsbin.com/jomemuko/1/edit (actually you need to hit the Run with JS button to make it work - some script loading issue I don't have time for)
Ideally you should use a listView widget and assign it a template for only one item. Also in your viewModel you should create a kendo dataSource and pass it as an option to newly created listView. Then in the viewModel you should refine your registerHero function to make it add the hero to the dataSource. Widget should automatically refresh.
Hope it helps