It's look like easy but I don't understand. So I have HTML
<div class="ui three column grid" data-bind="foreach: stories">
<div class="column">
<div class="ui stacked segment">
<div class="ui three column grid center aligned">
<div class="column">
<div class="ui buttons icon">
<div class="ui button small">
<i class="icon plus"></i>
</div>
</div>
</div>
<div class="column">
<div class="ui labels circular">
<div class="ui label">
124124
</div>
</div>
</div>
<div class="column">
<div class="ui buttons icon">
<div class="ui button small">
<i class="icon minus"></i>
</div>
</div>
</div>
</div>
<div class="ui grid center aligned">
<div class="row">
<div class="column">
<h1>yo</h1>
</div>
</div>
<div class="row">
<div class="column">
<div class="ui segment" data-bind="foreach: {data: stories.strings, as: 'string'}">
<p data-bind="text: string"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And my js file with viewModel
define(['knockout', 'dataContext'], function (ko, dataContext) {
viewModel = {
activate: activate,
main: ko.observable(true),
stories: ko.observableArray([]),
};
return viewModel;
function activate() {
return dataContext.getStories().then(function(data) {
console.log(data.results);
_.each(data.results, function(result) {
console.log(result.strings);
viewModel.stories.push({strings: result.strings});
});
console.log(viewModel.stories());
});
}
})
So foreach: 'stories' is not working, that is problem. Console show me that
"Unable to process binding "foreach: function (){return stories }"
Message: Unable to process binding "foreach: function (){return {data:stories.strings,as:'string'} }"
Message: stories is not defined;"
The exception is being thrown because of your second foreach:
<div class="ui segment" data-bind="foreach: {data: stories.strings, as: 'string'}">
<p data-bind="text: string"></p>
</div>
Because you are in the context of the "stories" writing stories.strings throws because there is no stories property inside the stories items so you just need to write strings:
<div class="ui segment" data-bind="foreach: { data: strings, as: 'string' }">
<p data-bind="text: string"></p>
</div>
Related
Is there any option/s needed so the icons inside nested grid will be clickable?
I have an icon on the parent grid and it's working fine, but when it comes to the icons inside nested grid, nothing happens.
<div class="grid-stack parent-grid">
<div class="grid-stack-item wid-item" data-gs-x="0" data-gs-y="0" data-gs-no-move="true">
<div class="grid-stack-item-content wid-item-content">
<div class="widget-container">
<div class="widget-title">
<span id="wid-title">WIDGET TITLE</span>
<span class="widget-icon icon-enlarge"></span>
<span class="widget-icon icon-bin"></span>
</div>
<div class="widget-body">
<div class="grid-stack widget-component">
<div class='grid-stack-item wid-component-item'>
<div class='grid-stack-item-content'>
<div class='widget-title'>
<span class='widget-icon icon-bin'></span>
</div>
<div class='widget-body'>
<label>Widget 1</label> <br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(".icon-bin").click(function (e) {
alert("ASD");
});
</script>
My page is basically split in two parts:
<div *ngIf="initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Title
</div>
<div class="content">
{{ someText }}
</div>
</div>
<button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div *ngIf="!initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Another title
</div>
<div class="content">
{{ someOtherText }}
</div>
</div>
</div>
The point is that the accordion in initalState works fine, but the one in not initial state not - no reaction on a click on that element. In my case it is easy to make a work-around, but how should I do it without a work-around? How can I make the second accordion call:
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
Use [hidden] attribute, when you use *ngIf the element is not created in the dom so jQuery can not init the accordion on it.
<div [hidden]="!initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Title
</div>
<div class="content">
{{ someText }}
</div>
</div>
<button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div [hidden]="initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Another title
</div>
<div class="content">
{{ someOtherText }}
</div>
</div>
</div>
I have the following JSON received at my web application.
I have a knockout viewmodel:
var self = this;
self.ActiveAlarms = ko.observable();
and my JSON call:
$.getJSON("/api/Dashboard/ActiveAlarmsPerAlarmTypeForTurbine/591", function (data) {
objVM.ActiveAlarms(data);
});
And I have my .cshtml page:
<div class="row">
<div class="col-md-12">
<span data-bind="text: objVM.ActiveAlarms.turbine.name"></span>
</div>
</div>
<div class="row" data-bind="foreach: listOfAlarmsPerAlarmType">
<div class="col-md-12">
<span data-bind="text: alarmType.name"></span>
</div>
</div>
But nothing shows up... :-( - what am I missing here?
The rest of the webpage, viewmodel and the knouckout/json works very fine.
Could be a number of things, are you binding the page correctly?
But one thing i noticed what this
<div class="row">
<div class="col-md-12">
<span data-bind="text: objVM.ActiveAlarms().turbine.name"></span>
</div>
</div>
<div class="row" data-bind="foreach: listOfAlarmsPerAlarmType">
<div class="col-md-12">
<span data-bind="text: alarmType.name"></span>
</div>
</div>
You need to add parentheses to the observable object in the markup
In my mixitup, i am doing a basic filter but when i click one of the filter buttons, filtered items comes and disappears after a second. I can see in firebug, it adds “fail” class to the container of these items. But i can’t see what kind of error is that.
In codepen: http://codepen.io/anon/pen/PPOgwr
Here is my HTML for filter buttons:
<div class="row row-centered filter-section">
<div class="col-md-7 col-centered">
<ul class="filter">
<li>Hepsi</li>
<li>/</li>
<li>Basılı İş</li>
<li>/</li>
<li>Kurumsal Kimlik</li>
<li>/</li>
<li>İlan</li>
<li>/</li>
<li>Ambalaj</li>
<li>/</li>
<li>Stand</li>
<li>/</li>
<li>Film</li>
</ul>
</div>
</div>
Here is the container:
<div class="row grid" id="grid">
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver1">
<img class="img-responsive" src="isler/silver/silver1.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver2">
<img class="img-responsive" src="isler/silver/silver3.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix ilan">
<div class="position-relative">
<a href="" id="silver3">
<img class="img-responsive" src="isler/silver/silver4.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
</div>
JS code:
$('#grid').mixItUp();
$('.filter-section').on( 'click', 'a.filter', function() {
var filterValue = $(this).attr('data-filter');
$('#grid').mixItUp('filter', filterValue, false);
$('#grid').on('mixFail', function(e, state){
console.log(state);
});
});
I need your helps
It's probably a bit late to give you an answer on this, but I ran into a similar problem and as part of that I managed to sort yours, too.
To cut it short, your issue is that you applied the 'filter' class on the <ul> as well as the <li> tags. Removing the class from <ul> in the CodePen you provided solves the issue - although messes up your layout.
Hope this helps.
What I need is to divide the ui-segment into 3 columns and to show the ui- statistics equally divided. Below is my code to achieve that,
<div class="ui container">
<div class="ui segment">
<h3 class="ui header">World</h3>
<div class="ui grid stackable">
<div class="three column row">
<div class="column">
<div class=" ui statistic red statistic">
<div class="value">
16%
</div>
<div class="label">
A
</div>
</div>
</div>
<div class="column">
<div class=" ui statistic yellow statistic">
<div class="value">
53%
</div>
<div class="label">
B
</div>
</div>
</div>
<div class="column">
<div class=" ui statistic green statistic">
<div class="value">
31%
</div>
<div class="label">
C
</div>
</div>
</div>
</div>
</div>
</div>
</div>
But this looks bad. The mobile also looks the same that the columns are out of the ui-segment.
How can I fix this?
Thanks in advance.
I'm not sure about the interaction between Semantic UI's stackable grid and statistics.
This could be an option, but you could try the ui statistics grouping.
<div class="ui three statistics">
<div class=" ui statistic red statistic">
<div class="value">16%</div>
<div class="label">A</div>
</div>
<div class=" ui statistic yellow statistic">
<div class="value">53%</div>
<div class="label">B</div>
</div>
...
...
I made a sample here:
http://jsfiddle.net/4a32bbmu/