Can I do if / else in knockout?
I see there are a few answered questions regarding this from a while ago, but after doing some research I'm having a hard time figuring out if this is currently included in knockout.
Thanks.
Knockout does not have "else" binding. Instead you can do the following:
<div data-bind="if: capital">
Capital: <b data-bind="text: capital.cityName"> </b>
</div>
<div data-bind="if: !capital()">
<b>No capital</b>
</div>
The documentation about "if" binding you can read here: if-binding
Related
<p th:with="firstName1='James1'">
<p>Upper</p><p th:text="${firstName1}"></p>
</p>
<p th:with="df='today'">
Today is: <span th:text="${df}">13 February 2011</span>
Could you tell me what is the difference between the two code sections. They seem identical for me. But there is some difference as the results differ.
Alright, I've never encountered this before... but it looks like Thymeleaf is enforcing the rule that Any <p> (or other block-level element) will implicitly close any open <p>. This works, for example:
<div th:with="firstName1='James1'">
<p>Upper</p>
<p th:text="${firstName1}"></p>
</div>
<p th:with="df='today'">
Today is: <span th:text="${df}">13 February 2011</span>
</p>
In your example, the firstName1 variable is out of scope because the parser is treating your HTML like this (so firstName1 is considered null):
<p th:with="firstName1='James1'"></p>
<p>Upper</p>
<p th:text="${firstName1}"></p>
Previously to create Accordion controls I used to use this piece of code:
<div class="panel-group" id="accordionMessagesSetup">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
<span class="glyphicon glyphicon-chevron-up"></span>
Message Setup
</a>
</h4>
</div>
<div id="collapseMessagesSetup" class="panel-collapse collapse in">
<div>
<p style="background-color: red"> Someting ELSE in here</p>
<p style="background-color: red"> Someting ELSE2 in here</p>
</div>
</div>
</div>
</div>
or as seen here: Bootplay Live Demo
Now I still want to use my example but in this page I have a for-each loop so I need to create these at run-time.
The items I need to put variables there in order for this to work are
id="accordionMessagesSetup"
data-parent="#accordionMessagesSetup"
href="#collapseMessagesSetup"
id="collapseMessagesSetup"
How can I initialize those in a for-each loop a mode using Razor?
Imagine you have whatever property you like to do it in the model.
The biggest issue you are/will likely run into is Razor parsing. When you try to use a Razor variable in the middle of some bit of text, often Razor cannot determine where the variable name ends. For example, if you were to do something like:
<div id="accordion#Model.IdMessageSetup">
Razor thinks it needs to look for a property on the model named IdMessageSetup, when actually, you just wanted Id. The easiest way to fix this is to wrap the variable in paranthesis:
<div id="accordion#(Model.Id)MessageSetup">
Now, it's clear which part is the variable. As far as adding the # sign goes, I'm not really sure what the confusion is there. You just put it where it needs to go:
<a href="#collapse#(Model.Id)MessagesSetup">
Nothing special required.
So recently I have been playing around with yacy the p2p search engine. I came across this strange syntax in their html pages looks like some type of include, am not sure exactly what it does (or what language it is). here's the code.
#(num-results)#
::
<p>No Results.</p>
::
<p>No Results. (length of search words must be at least 1 character)</p>
::
<div id="results"></div>
<div class="progress">
<div class="progress-bar progress-bar-info" id="progressbar" role="progressbar" style="width:0%;">
<span style="position:absolute;display:block;text-align:left;width:100%;color:black;"> <strong id="offset">#[offset]#</strong>-<strong id="itemscount">#[itemscount]#</strong> of <strong id="totalcount">#[totalcount]#</strong> #(globalresults)#::; (<strong id="localResourceSize">#[localResourceSize]#</strong> local, <strong id="remoteResourceSize">#[remoteResourceSize]#</strong> remote), <strong id="remoteIndexCount">#[remoteIndexCount]#</strong> from <strong id="remotePeerCount">#[remotePeerCount]#</strong> remote YaCy peers.#(/globalresults)#</span>
</div>
</div>
What does the #(somename)# and #[somename]# syntax do? please help.
Absolutely nothing. but you could parse it with javascript and replace it with values.
Its no official language. its their own implementation to manipulate html output.
Which can be done server side or client side. They kinda make up the rules and you can decide by styling where the values should appear.
In my example I replace #[itemscount]# by an arbitrary 10
str = '<span style="position:absolute;display:block;text-align:left;width:100%;color:black;"> <strong id="offset">#[offset]#</strong>-<strong id="itemscount">#[itemscount]#</strong> of <strong id="totalcount">#[totalcount]#</strong> #(globalresults)#::; (<strong id="localResourceSize">#[localResourceSize]#</strong> local, <strong id="remoteResourceSize">#[remoteResourceSize]#</strong> remote), <strong id="remoteIndexCount">#[remoteIndexCount]#</strong> from <strong id="remotePeerCount">#[remotePeerCount]#</strong> remote YaCy peers.#(/globalresults)#</span>';
document.getElementById('container').innerHTML = str.replace('#[itemscount]#',"10");
<div id="container"></div>
We just updated from jquery mobile beta 2 to rc2. We had a custom button that we don't want jqm to initialize (add extra markup) so we used this:
<button id="buttonid" data-role="none"></button>
And that worked perfectly, but now with the update it is actually initializing the button. I don't see any updates in the release notes or the documentation. Am I missing something?
Markup after update:
<div data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-down-c ui-btn-up-c" aria-disabled="false">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text"></span>
</span>
<button id="buttonid" data-role="none" class="ui-btn-hidden" aria-disabled="false"></button>
</div>
UPDATE
As Phill pointed out, my problem is hard to reproduce. Could be something with my code but it seems strange that simple changing version creates the behaviour for me. Here is additional markup that I first stripped out from example:
<ul class="item" data-role="listview" data-inset="true">
<li data-role="list-divider">Something</li>
<li>
<div class="block_container" data-role="none">
<div class="block block_small">
<button data-role="none" id="check-123" class="check" data-id="something"></button>
</div>
<div class="block block_small assignment">
<button data-role="none" id="assign-123" class="assignmentoverlay"></button>
</div>
<div class="block">
<h3>
Something
</h3>
<p>
lorem..
</p>
</div>
</div>
</li>
UPDATE 2
I found what the problem is. I am populating my list from javascript. At the end I'm calling trigger("create"). This will enhance all the elements in my list, even those with data-role="none.
jsfiddle to reproduce problem - http://jsfiddle.net/V2xAX/9/
Updating title of question
UPDATE 3
Hopefully the last update. We got it to work by doing the following:
When calling trigger("create")on my list, every element will be enhanced. We don't want this.
When calling trigger("create")on the page element holding the jquery mobile page, only elements without data-role="none"will be enhanced. This is the behavior we want.
Link for testing - http://jsfiddle.net/V2xAX/16/
It would be interesting to know why this happens :)
I am trying to use the jquery-ui accordion functionality on a drupal page. I have teams with multiple people in each team that I want to display. I have a view set up that groups by team, and has contact info for each team member. My accordion doesn't seem to be working. I used <?php jquery_ui_add('ui.accordion'); ?> to import the correct js file from the jquery ui module, and it is showing up in the js file.
I was wondering if I have too many div tags and that is shomehow messing with it. Does anyone see anything that may be affecting this?
Thanks for any thoughts.
Here is some sample code -
<div id="accordion">
<div>
<h3>Team: 1</h3>
<p>
<div class="views-field-title">
<label class="views-label-title">
Title:
</label>
<span class="field-content">John Doe</span>
</div>
<div class="views-field-field-email-value">
<label class="views-label-field-email-value">
Email:
</label>
<span class="field-content">John.Doe#email.com</span>
</div>
<div class="views-field-field-phone-value">
<label class="views-label-field-phone-value">
Phone:
</label>
<span class="field-content">555-555-5555</span>
</div>
<div class="views-field-field-extension-value">
<label class="views-label-field-extension-value">
Extension:
</label>
<span class="field-content"></span>
</div>
<div class="views-field-field-role-value">
<label class="views-label-field-role-value">
Role:
</label>
<span class="field-content">Team Leader</span>
</div>
</p>
and here is my jquery accordion call -
<script>
$(document).ready(function() {
$(function() {
$( "#accordion" ).accordion();
});
});
</script>
I hope you have figured it out already, but here's a solution I wrote up a while back...
http://www.cleaver.ca/content/jquery-ui-accordion-drupal-6
There can be some incompatibilities based on the version of jQuery and jQueryUI, so this may help sort things out. There's a link to the site where I got it workin
First off, when troubleshoot jQuery I have found it very useful to scale down any HTML that I pass to it to be parsed. Next, are you sure that the UI library is being called in. Try using drupal_add_js('/path/to/jquery.ui.js'); when you load your module.