Sample example or tutorial using knockout KoLite for change tracking - knockout-2.0

Is there any simple example on how to use knockout kolite to track the changes.
I saw this link posted by john papa [Kolite][1]. I didnt understood how he is binding changes to the html element for tracking changes. Anyone have any simple example of how to use it then its highly appreciated. I am newbee when it comes to knockout. Please help. Many thanks
I found one example. Here is link to fiddle
KoLite example
In fiddle you can see that save button is hiding and unhiding properly if there are any changes made to input field. I added code to enable the Cancel button but its not working.
<div data-bind="enable: dirtyFlag().isDirty">
<button>Cancel</button>
</div>
Please can you tell me why?

There you go:
http://jsfiddle.net/6dz7g/12/
<input type="text" data-bind="value: name, valueUpdate: 'keyup'"/>
<div data-bind="if: dirtyFlag().isDirty">
<button>Save</button>
</div>
<div>
<button data-bind="enable: dirtyFlag().isDirty">Cancel</button>
</div>
I've simply used ifnot binding for the save button.

Related

Does waitForElementVisible not search for input elements?

I am using nightwatch.js to perform end-to-end testing and have to use a roundabout method for a waitForElementVisible command to work as expected. For example, my code below:
browser.waitForElementVisible(".profile label[for='Admin']") // works
browser.waitForElementVisible(".profile label[for='Admin'] input[id='Admin']") // breaks
For further clarification, I am testing to see if a radio button is visible. The radio button's DOM elements is as such:
<div class='profile'>
<div class='roleSelector'>
<label for="Admin">
<input type="radio" id="Admin" class="Admin">
</label>
</div>
</div>
As far as I know, there is no such specific case.
Did you try using '.profile input[id='Admin']' ?
Hope that serves your purpose at hand.

How to add buttons to my Spartacus storefront?

I am trying to add buttons to my Spartacus storefront.
The problem that is preventing me to progress ahead is:
1)If I generate new button angular component, using Angular, should it be mentioned inside the
tag or outside of that?
2)Should it be rendered in a different way as first?
Check out this repo and the corresponding stackblitz project. The easiest way add new buttons would be to place it in reference to an existing standard component using the outlets. Essentially, you could do some like the following, placing your new angular component app-custom-component before the ExistingComponent.
<ng-template cxOutletRef="ExistingComponent" cxOutletPos="before">
<app-custom-component></app-custom-component>
</ng-template>
Can you describe the problem more clearly? As much as I understood you are looking for below kind of code. For code check this link Spartacus Product Page
<div class="row">
<div class="col-md-6">
<button
class="btn btn-block btn-action"
(click)="addAddressButtonHandle()"
>
{{ 'addressBook.addNewAddress' | cxTranslate }}
</button>
</div>
</div>

Getting the value of page type form

I'm trying to add a new field named "AlternateLink" to our news page types.
Currently the "Read More" button goes to the full article page with the following:
Read More
I've updated it to:
Read More
but even with a link in the Alternate Link field (see attached image), it always links to the full article page instead of the alternate link.
I tried the same IfEmpty statement with other existing field names such as "NewsTitle" or "NewsImage" and those seem to work so the issue seems to be "AlternateLink" field name.
I created a field with the ID of "AlternateLink" as a text box. Am I missing another step to make it capture the value?
EDIT: AlternateLink is the only new thing I'm adding. All of the existing values (NewsTeaser, NewsTitle, NewsSummary, etc.) all work. Full code:
<div class="blog-post col-md-12 clearfix">
<cms:Media ID="mTeaser" runat="server" Url='<%# Eval("NewsTeaser") %>' Class="img-responsive" />
<h2 class="blog-title"><%# Eval("NewsTitle",true) %></h2>
<div class="post-info">
<i class="fa fa-clock-o"></i><%# GetDateTime("NewsReleaseDate", "MMMM dd, yyyy") %>
</div>
<p><%# Eval("NewsSummary") %></p>
Read More
<span class="hr col-md-12 col-sm-12 col-xs-12"></span>
</div>
You don't need Eval for Text/XML transformations.
Have you checked columns field of the web part, that shows news on the page? Make sure AlternateLink column is also listed there.
Have you tested using just <%#Eval("AlternateLink",true)%> to see what it returns?
Looks like your code is {%Eval("AlternateLink",true)%} when it should be {%AlternateLink%}. <%#%> is for ASPX Transformations. {%%} is for Text/XML transformations, which it looks like you are using.
Could you please try this.
Read More

ModX Revolution MIGX/GetImageList not displaying entire list

I have a site that was built and handed over to me, so I'm not as familiar with ModX as I'd like to be. That said, I've built my own templates, tpls and the like.
However, and existing MIGX using template is giving me fits. It used to display all the items in the list properly - one image, and three text fields. Now, it randomly will stop displaying one item.
When I say random, I don't mean that it switches around when you refresh the page - I mean right now item #4 isn't being displayed (even in source code, nothing appears). But if I were to delete any other item, that #4 might just show up again, and a different item start disappearing.
I'm at a loss here. I see no special characters in the text fields. Even if there were, that wouldn't explain how an item will work then not work then work again based on making changes to other items.
Please let me know what other information I can provide to assist in troubleshooting this.
Below is all the relevant code I can think of.
Template:
<div id="content">
[[!getImageList?
&tvname=`management`
&docid=`[[*id]]`
&tpl=`management_tpl`
&limit=`0`
]]
<div class="clear"></div>
</div><!-- #content -->
management_tpl:
<div class="management_box">
<div class="management_img">
<img src="[[+image:phpthumbof=`w=100&z=1`]]" alt="[[+pagetitle]]" />
</div>
<div class="management_content">
<h2>[[+name]]</h2>
<h3>[[+position]]</h3>
[[+descr]]
Show more
</div>
<div id="[[+name:stripString=` `]]" class="fulldescr">
<img src="[[+image:phpthumbof=`w=100&z=1`]]" alt="[[+pagetitle]]" />
<h2>[[+name]]</h2>
<h3>[[+position]]</h3>
[[+fulldescr]]
</div>
<div class="clear"></div>
</div>
Thanks,
Chris
For anyone who finds this in the future - my MIGX plugin was outdated and had some flaws that caused this. Updating the plugin fixed everything.

Capybara not finding submit button by name

I have some weirdness occurring while trying to switch from webrat to capybara. The error is this:
And I press "Create floob"
# features/step_definitions/web_steps.rb:27
no button with value or id or text 'Create floob' found (Capybara::ElementNotFound)
The html in my app looks like this:
<fieldset class="buttons">
<ol>
<input id="floob_submit" name="commit" type="submit" value="Create floob" />
</ol>
</fieldset>
I would have thought that capybara would look at the value of the buttons on the page, and reading the documentation this does seem to be the case, but it's not working! If I change the line in my cuke file to And I press "floob_submit" everything works, but I'd rather not change all my features...
Does anyone have any thoughts on why this might be happening and if there's a fix? Thanks friends!
The only thing I can see is that you aren't wrapping your input in an <li></li>. This might be confusing enough for the DOM to cause your problem.

Resources