Knockout update onClick Mapped ViewModel property - javascript

1) When a user clicks an anchor inside div with class='thumbs'
2) I want to automatically update ViewModel's IMAGE_PATH and IMAGE_DESCRIPTION
3) based on clicked thumb THUMB_PATH and THUMB_DESCRIPTION accordingly and update the UI inside div class='containt'
Short Version: I want Containt div always reflect the clicked thumb details.
Can someone please help me or suggest me resources on how to achieve that while using Knockout's Mapping Plugin?
Thanks in advance!
var data= {
"ImagesInfo": [
{
"IMAGE_PATH": "",
"IMAGE_DESCRIPTION": "",
"thumbs": [
{
"thumb_id": "1",
"THUMB_PATH": "url(http://..183.jpg)",
"THUMB_DESCRIPTION":"here is a car",
"type": "sponsor"
},
{
"thumb_id": "2",
"THUMB_PATH": "url(http://..184.jpg)",
"THUMB_DESCRIPTION":"here is a boat",
"type": "img"
},
{
"thumb_id": "3",
"THUMB_PATH": "url(http://..185.jpg)",
"THUMB_DESCRIPTION":"here is a plane",
"type": "video"
}
]
}
]
}
<div id="Images">
<div data-bind="foreach: ViewModelB">
<div class="containt" style="margin-top: 10px;">
<div data-bind="style: { backgroundImage: IMAGE_PATH }"></div>
<div data-bind="html: IMAGE_DESCRIPTION"></div>
<div style="clear: both;"></div>
</div>
<div class="thumbs" style="margin-top: 10px; margin-left: 4px">
<div data-bind="foreach: thumbs">
<a class="thumb" data-bind="style: { backgroundImage: THUMB_PATH }, attr: { id: thumb_id }"></a>
</div>
</div>
</div>
<script>
var ViewModelB = ko.mapping.fromJS(data);
ko.applyBindings(ViewModelB, document.getElementById("Images"))
</script>

Related

Show Images From Flick in angular js

API :
"data": [
{
"accrediationsId": 1,
"imageURL": "<a data-flickr-embed=\"true\" href=\"https://www.flickr.com/photos/152241238#N02/25515548558/in/photostream/\" title=\"1\">
<img src=\"https://farm5.staticflickr.com/4592/25515548558_0cb257389b_o.jpg\" width=\"266\" height=\"79\" alt=\"1\"></a>
<script async src=\"//embedr.flickr.com/assets/client-code.js\" charset=\"utf-8\"></script>"
},
{
"accrediationsId": 2,
"imageURL": "<a data-flickr-embed=\"true\" href=\"https://www.flickr.com/photos/152241238#N02/25515548508/in/photostream/\" title=\"2\">
<img src=\"https://farm5.staticflickr.com/4728/25515548508_16ab9d0cb4_o.jpg\" width=\"266\" height=\"79\" alt=\"2\"></a>
<script async src=\"//embedr.flickr.com/assets/client-code.js\" charset=\"utf-8\"></script>"
},
HTML CODE :
<div class="col-md-3 col-sm-6 col-xs-6" ng-repeat="Affiliation in
getAffiliationData">
{{Affiliation.imageURL}}
</div>
Need to show Images from flikr in html page by using angular js. Is that possible to get image path directly from flikr api and show in ng-repeat.
Use image element with ng-src
<div class="col-md-3 col-sm-6 col-xs-6" ng-repeat="Affiliation in
getAffiliationData">
<img ng-src="{{Affiliation.imageURL}}">
</div>
DEMO
var app =angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
$scope.getAffiliationData = [
{
"accrediationsId": 1,
"imageURL": "https://farm5.staticflickr.com/4592/25515548558_0cb257389b_o.jpg"
},
{
"accrediationsId": 2,
"imageURL": "https://farm5.staticflickr.com/4728/25515548508_16ab9d0cb4_o.jpg"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<div ng-repeat="Affiliation in
getAffiliationData" ng-click="setClickedRow(user)">
<img ng-src="{{Affiliation.imageURL}}">
</div>
</body>
Double braces are not used for binding html content, they are used for rendering text, to render html you can use this "ng-bind-html"
Try this:
<div class="col-md-3 col-sm-6 col-xs-6" ng-repeat="Affiliation in getAffiliationData">
<div ng-bind-html="Affiliation.imageURL"></div>
</div>
you will need to inject this module
here is the demo link

How to fetch data dynamically from JSON file on click?

I have created an artist(artists.html) page, which includes around 15 artists. Now I am trying to create the profile of each artist through one single HTML file dynamically. So I have created another HTML file(single-artist.html) which will show the profile of an artist clicked by the visitor.
artists.html (Out of 15 artists, below are the two examples)
<div class="all-artist" id="artists">
<div class="col-md-4 col-sm-6 col-xs-6 artist-single" data-number="0">
<div>
<a href="artist-single.html">
<img src="img/1.jpg" alt="">
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 artist-single" data-number="1">
<div>
<a href="artist-single.html">
<img src="img/2.jpg" alt="">
</a>
</div>
</div>
</div>
artist-single.html
<div id="name"></div>
<div id="logo"></div>
<div id="bio"></div>
data.json
[{
"name": "Arsh",
"logo": "img/logo.jpg",
"bio": "Arsh is a singer/songwriter"
},
{
"name": "Benz",
"logo": "img/logo.jpg",
"bio": "Benz is a singer"
}]
main.js
$('#all_artists artist-single').on('click',function(){
window.location.href="artist-single.html";
var num = $(this).data('number');
$.getJSON('data.json',function(data) {
$('#name').html(data[num].name);
$('#description').html(data[num].bio);
$('#logo').append('<img src=data[num].logo>');
});
});
Now, when I click on an artist image, it redirects to artist-single.html but it's not fetching values. Maybe because I am redirecting and fetching the values on the same event. Help would be really appreciated.
$(document).ready(function() {
var num = $.cookie('num');
$.getJSON('data.json', function(data) {
$('#name').html(data[num].name);
$('#description').html(data[num].bio);
$('#logo').append('<img src=data[num].logo>');
});
$('#artists .artist-single').on('click', function() {
var num = $(this).data('number');
$.cookie('num', num);
window.location.href = "artist-single.html";
});
});

jquery each loop dom operations (JSON)

I have a problem with function based on each loop. I am beginner and I havent find my answer on other topics.
I have function like this:
function treeToCloud() {
$(".treelist .treeimage").each(function(){
idCloudImage = $(".cloud-img img").attr("class");
cloudImage = $(".cloud-img img");
if($(this).attr("id") == idCloudImage) {
var treeImage = $(this).attr("src");
$(cloudImage).attr("src", treeImage);
}
});
}
HTML like this:
<div class="treelist">
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/1.jpg" id="231" class="treeimage">
</div>
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/2.jpg" id="21" class="treeimage">
</div>
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/3.jpg" id="44" class="treeimage">
</div>
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/4.jpg" id="45" class="treeimage">
</div>
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/5.jpg" id="46" class="treeimage">
</div>
<div class="treeImgContainer">
<img src="images/del-img2.png" class="deleteTreeImage">
<img src="images/6.jpg" id="441" class="treeimage"></div>
</div>
</div>
second part HTML:
<div class="say-item cloud">
<div class="cloud-img">
<img src="images/addci.jpg" class="45">
</div>
<div class="cloud-img">
<img src="images/addci.jpg" class="46">
</div>
</div>
JSON like this:
{
"images": [
{
"id": "231",
"uri": "images/1.jpg"
},
{
"id": "21",
"uri": "images/2.jpg"
},
{
"id": "44",
"uri": "images/3.jpg"
},
{
"id": "45",
"uri": "images/4.jpg"
},
{
"id": "46",
"uri": "images/5.jpg"
},
{
"id": "441",
"uri": "images/6.jpg"
}
]
}
second JSON (part) like this:
{
"iconId": "45"
},
{
"iconId": "46"
}
And now. I have add all id's with JSON load using .attr("id") (working correctly). JSON id is in .treelist class and second JSON ("iconId") into selectors in .cloud class.
Now I need to compare them and if id in ".treelist" is the same like id in ".cloud" class I want to give for .cloud img source like is in the same id in .treelist.
I have created function, but it is changing only one (first) element and stops.
I need your help with this because I dont understand why it not working correctly
Thanks, Fantazy
function treeToCloud() {
$(".treelist .treeimage").each(function(){
var currentTree = $(this);
$(".cloud .cloud-img").each(function(){
idCloudImage = $(this).find("img").attr("id");
cloudImage = $(this).find("img");
if($(currentTree).attr("id") == idCloudImage) {
var treeImage = $(currentTree).attr("src");
$(cloudImage).attr("src", treeImage);
}
});
});
}
Please try following code
function treeToCloud() {
$(".treelist .treeimage").each(function(){
var firstId = $(this).attr("id");
$(".cloud-img img").each(function(){
var secondId = $(this).attr("id");
if(firstId == secondId ) {
$(this).attr("src", treeImage);
}
});
});
}
Thanks! vijayP solved my problem ! :)
Urvi - thanks, but Your code not working
Final code:
function treeToCloud() {
$(".treelist .treeimage").each(function(){
var currentTree = $(this);
$(".cloud .cloud-img").each(function(){
idCloudImage = $(this).find("img").attr("class");
cloudImage = $(this).find("img");
if($(currentTree).attr("id") == idCloudImage) {
var treeImage = $(currentTree).attr("src");
$(cloudImage).attr("src", treeImage);
}
});
});
}

ng-repeat on bootstrap tab-content/tab-pane

I am having trouble getting my tab content to appear properly on page load. What I have is a factory of Objects called apiList, I then use two ng-repeats, one which hits each object in the apiList, then the next one which iterates through that object and puts all of its data on the page. I use #tab{{$index}} to keep my data-toggles aligned between the buttons and tab-panes.
The problem seems to be with how I use the active attribute on my tab-pane.
I have three known test cases so far.
I can only get information from the first Object by using the condition ng-class="{ 'active': $index == 0}" as in..
<div ng-repeat="(key, data) in apiList[0]" class="tab-pane active" id="tab{{$index}}" ng-class="{ 'active': $index == 0}">
If I remove the conditional from the line then nothing appears
And if I just add active to the pane value (with no condition)
(i.e. <div ng-repeat="(key, data) in apiList[0]" class="tab-pane active" id="tab{{$index}}"> They all appear.
So my problem seems to be with how I need to turn on/off my active for the ng-repeat and I am just getting lost.
Also, clicking on accounts/customers does not update the tabs. They both have the right data-toggle ID's (0 and 1) in respect to the tab-panes so I assume it is part of the active issue. And whenever I click on my tab panes, they do expand just fine.
Here is my Factory, ng-repeat(s), and the code that was my original setup (functional).
Factory
.factory('APIMethodService', [function() {
var Head = "api.verifyvalid";
return {
apis: [
{
accounts: [
{
parameters : [
{
name : "Accounts",
version : "1.0"
}
],
uri: Head + "/v1/accounts/account_number",
methods : [
{
name: "Account Number",
desc: "Returns the account number."
}, {
name: "Account Money",
desc: "Returns the monetary amount within the account."
}
]
},
{
parameters : [
{
name : "Accounts",
version : "2.0"
}
],
uri: Head + "/v2/accounts/account_number",
methods: [
{
name: "Account Number",
desc: "Returns the account number."
}, {
name: "Account Money",
desc: "Returns the monetary amount within the account."
}, {
name: "Account Token",
desc: "Returns the account's token."
}
]
}
],
customers:[
{
parameters : [
{
name : "Customers",
version : "1.0"
}
],
uri: Head + "/v1/customers/customer_number",
methods : [
{
name: "Customer Name",
desc: "Returns the customer's name."
}, {
name: "Customer ID",
desc: "Returns the customer's ID."
}
]
},
{
parameters : [
{
name : "Customers",
version : "2.0"
}
],
uri : Head + "/v2/customers/customer_number",
methods: [
{
name: "Customer Name",
desc: "Returns the customer's name."
}, {
name: "Customer ID",
desc: "Returns the customer's ID."
}, {
name: "Customer Email",
desc: "Returns the customer's email."
}
]
}
]
}
]
};
ng-repeat (just the right-hand tabs)
<div class="col-md-9">
<div class="tab-content">
<div ng-repeat="(key, data) in apiList[0]" class="tab-pane active" id="tab{{$index}}">
<div ng-repeat="api in apiList[0][key]">
<div class="panel panel-info" id="panel{{$index}}">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapse{{key}}{{$index}}" class="collapsed">
{{api.uri}}<i class="newTab" ng-click="apiTab(api)">(Open in new tab)</i>
</a>
</h4>
</div>
<div id="collapse{{key}}{{$index}}" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr ng-repeat="method in api.methods">
<td>{{method.name}}</td>
<td>{{method.desc}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The following code is what I originally had, before trying to crunch it down more
<div class="col-md-9" style="display:none">
<div class="tab-content">
<!-- Accounts -->
<div class="tab-pane active" id="tab0">
<div ng-repeat="api in apiList[0].accounts">
<div class="panel panel-info" id="panel0">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseAccountsV{{$index}}" class="collapsed">
{{api.uri}}
</a>
<i class="newTab" ng-click="apiTab(api)">(Open in new tab)</i>
</h4>
</div>
<div id="collapseAccountsV{{$index}}" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr ng-repeat="method in api.methods">
<td>{{method.name}}</td>
<td>{{method.desc}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Customers -->
<div class="tab-pane" id="tab1">
<div ng-repeat="api in apiList[0].customers">
<div class="panel panel-info" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseCustomersV{{$index}}" class="collapsed">
{{api.uri}}<i class="newTab" ng-click="apiTab(api)">(Open in new tab)</i>
</a>
</h4>
</div>
<div id="collapseCustomersV{{$index}}" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr ng-repeat="method in api.methods">
<td>{{method.name}}</td>
<td>{{method.desc}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Other -->
<div class="tab-pane fade" id="tab3">
<!-- TBA -->
</div>
</div>
</div>
Noob mistake, everything works fine! I was using my old code as the base outline on the same page and had set that old code to style="display:hidden" but this still meant that the ID's were apart of the DOM, hence why I couldn't change my tab's properly (duplicate/conflicting ID's).

Recursive function for DOM to JSON

I'm trying to create a JSON index of a particular section of HTML. Here is the HTML that I have:
<div class="box span12">
<div class="row-fluid">
<div class="item span12" data-width-helper="12"></div>
</div>
<div class="row-fluid">
<div class="box span6">
<div class="row-fluid">
<div class="item span12" id="4" data-width-helper="12"></div>
</div>
<div class="row-fluid">
<div class="box span6">
<div class="row-fluid">
<div class="item span12" id="6" data-width-helper="12"></div>
</div>
<div class="row-fluid">
<div class="item span12" id="7" data-width-helper="12"></div>
</div>
</div>
<div class="item span6" id="5" data-width-helper="6"></div>
</div>
</div>
<div class="item span6" data-width-helper="6"></div>
</div>
<div class="row-fluid">
<div class="item span8" id="2" data-width-helper="8"></div>
<div class="item span4" id="3" data-width-helper="4"></div>
</div>
</div>
Ultimately, I'd like to end up with JSON that looks like this:
[
[
{
"id":1,
"width":12
}
],
[
{
"width":6,
"items":
[
[
{
"id":4,
"width":12
}
],
[
{
"width":6,
"items":
[
[
{
"id":6,
"width":12
}
],
[
{
"id":7,
"width":12
}
]
]
},
{
"id":5,
"width":6
}
]
]
},
{
"id":8,
"width":6
}
],
[
{
"id":2,
"width":8
},
{
"id":3,
"width":4
}
]
]
So basically, each box holds an array of rows, which holds an array of items, which are objects with a little descriptive information. I can't seem to wrap my head around a recursive function that will build out that json object so that there can be boxes instead of items going down unlimited levels.
Hopefully someone smarter than me can take the time to help out - I'd really appreciate it. And as a side note, I'm fine with using jQuery and/or Underscore.js
I'm not entirely sure how you want the function to work, so I just wrote a bit of psuedocode for you. The goal here was to make every tag into an array of its children, unless the tag was an item, in which case, it creates an object with "width" and "id" instead.
function toJSON(element)
var returnObject;
switch
case: item
returnObject = {
"id": elementId,
"width": elementWidth
};
break;
case: default
returnObject = [];
for each child
returnObject.push(toJSON(child));
break;
return returnObject;

Categories