How to use inline ternary with data-bind variable? - javascript

I'm currently creating a footer with Save/Cancel/Delete, depending on where the user is. Now I'm trying to not show/render the Delete button when it's not required. How to achieve this using a variable from KnockoutJS (observable) as the operator in a ternary?
Current code doesn't work properly but below anyway.
<li>#(Global.ButtonCancel)</li>
<script>
var button = "<li>#(Global.ButtonDelete)</li>";
isEditingProduct ? button : false;
</script>
<li>#(Global.ButtonSave)</li>
The error i keep getting is that "isEditingProduct" is undefined. When i use it inline (outside the script), for a straight <li data-bind="isEditingProduct" ></li> with the other stuff inside it works. It hides the button, but leaves me with a gaping hole in the footer. Which is why I'm trying to get around it by not loading it in for rendering at all if it's not yet needed.
Any help would be appreciated.

Taking a look at your code, I'm confused.
No idea why you feel you need a ternary to hide/unhide elements.
Use the visible: binding.
<li data-bind="visible: isEditingProduct"></li>
isEditingProduct needs to be a property on your view model.

You could use visible or if binding:
<li>#(Global.ButtonCancel)</li>
<li>#(Global.ButtonDelete)</li>
<li>#(Global.ButtonSave)</li>
Read documentation about these bindings:
http://knockoutjs.com/documentation/if-binding.html
http://knockoutjs.com/documentation/visible-binding.html

Not sure where you "isEditingProduct" is defined but you can't simply reference a part of your View Model in JavaScript without fully qualifying it. Instead try:
myViewModel.isEditingProducts = true;
Also, the location of your script block is confusing. It shouldn't be in-lined between <li /> tags. The script will not necessarily execute at that time (as the browser is parsing your markup).

Related

Prevent Javascript Injection in data attribute

I have a script that pulls a text from an API and sets that as a tooltip in my html.
<div class="item ttip" data-html="<?php echo $obj->titleTag;?>">...</div>
The API allows html and javascript to be entered on their side for that field.
I tried this $obj->titleTag = htmlentities(strip_tags_content($this->channel->status)));
I now had a user that entered the following (or similar, he is blocked now I cannot check it again):
\" <img src="xx" onerror=window.location.replace(https://www.youtube.com/watch?v=IAISUDbjXj0)>
which does not get caught by the above.
I could str_replace the window.location stuff, but that seems dirty.
What would be the right approach? I am reading a lot of "Whitelists" but I don't understand the concept for such a case.
//EDIT strip_tags_content comes from here: https://php.net/strip_tags#86964
Well, It's not tags you're replacing now but code within tags. You need to allow certain attributes in your code rather than stripping tags since you've only got one tag in there ;)
What you wanna do is check for any handlers being bound in the JS, a full list here, and then remove them if anything contains something like onerror or so

DOJO Custom Dialog Box - does not parse template file

I am new to DOJO. I have a custom widget , which uses a template file for the dialog box contents.
I am extending dijit.Dialog in the script file.
dojo.declare(
"custom.credentials",
[dijit._WidgetBase, dijit._Templated,dijit._WidgetsInTemplateMixin,**dijit.Dialog**],
{
templatePath: dojo.moduleUrl("custom", "templates/credentials.html"),
....
....
postCreate: function() {
this.inherited(arguments);
alert(this.containerNode);
alert(this.mainDIV);
},
});
My Template test file looks like this
<div data-dojo-attach-point="mainDIV">
Login Dialog Box template here
</div>
For some reason, when I alert on this.mainDIV, I get 'undefined'. It does not read the template file. Also, this.containerNode gives me 'HTMLDIVElement', (parent dijit dialog DIV).
I am not able to figure out after a lot of trial error where exactly the issue is. Any help would be greatly appreciated.
Calling code
function opnPop(){
var pop= dijit.byId("customPopup");
pop.show();
}
<div dojoType="custom.credentials" id="customPopup"/>
Note : *When dijit.Dialog is not extended* it reads the template file without any problem, I.e, I am able to access this.mainDIV.innerHTML , that contains my own inner html contents.
Thank you.
If Dialog has to be sub-classed, then it must be the base class. Here, it seems that it is used as a mixin. Anyways, the problem is with the template that is used.
The template will be parsed and used by the code in Dialog. So, the template mentioned here has nothing but a div element with an attach point. There is no "containerNode" element (ie. attach point) and you are trying to access it in your js code, which will give error.
More important, the "titleBar" & "titleNode" elements are also missing form template, which will give errors while parsing the template. In order to avoid that, the code part that uses these elements need to be removed from js, to avoid error. So the widget creation will be successful. Try with the standard dijit.Dialog's template.
Add the data-dojo-attach-point="mainDIV" to the top level Dialog's div in the template.
In template, more things can be added, which won't cause any issues. But, if removed anything, will cause problem. If we are sub-classing a class/widget, we need to comply to the existing code.

Minimal jQuery template

I am creating a UI, in which user can add / delete items (of similar layout).
It starts with one item and you can click 'add' to add more. The UI consists of several different types of items.
What I am doing currently is populating a single item item 1 ( of each type ) and on add event, I clone the item 1, replace the changes done by user in item 1 and append the clone to the container.
In simple words, instead of dynamically creating html with jQuery, I am cloning html of a div. But in this approach , I had to change a lot of things to keep to give the new item to initial state.
So, I want to avoid the replacing the edits done by user, so I was thinking something like below,
<script type="text/template" id="item_type1">
<div>
<div>Box</div>
</div>
</script>
<script type="text/template" id="item_type2">
<div>
<div>Box2</div>
</div>
</script>
And on add event, I want to do something like $('#item_type1').html() and $('#item_type2') to create new items.
I know there are sophisticated libraries like handlebar and mustache and underscore has its own way of implementing templates.
But I am not using any of these already and thus do not want to included them just to copy content. I dont want anything special. I am not passing variables. I am just cloning some markup to use again and again.
Is this way to insert html in script tags , going to work in all browsers ? and is it a good way ?
EDIT:
Its for the wp plugin and I assume js is turned on , else the plugin wont work anyways.
What about:
Your HTML should be, for example:
<script type="text/template" id="item_type1">
<div>
<h1>Box1</h1>
<p>
</p>
</div>
</script>
And your code would be:
var templateHtml = $('#item_type1').html();
var $item = $(templateHtml);
$('body').append($item);
$item.on('click', function() {});
This is an easy way that will work on all browsers.
Step 1: Create an HTML file with your template inside of it
Step 2: Using jQuery's load() method, call your HTML template into a div element in the main HTML file:
$("#main-div").load("yourtemplate.html")
Step 3: Be amazed
Is this a good idea? It depends:
If it's a self contained application on a known environment with a determined supported browser and with equally determined settings (like if JavaScript is on or not) then yea, sure. Why not?
If it's open to the public in every single browser possible with many different configurations, then no, it's a horrible idea. If your user doesn't have JavaScript enabled, then your content doesn't show up. Also, if one of your scripts break in production, then you are again left with no content. You can learn this lesson from when Gawker made this same mistake

How to Animate the if body in knockoutjs?

I have one knockoutjs observable variable called "state" and i am using that variable to hide and show content in knockout with if condition like below:
<--if: state()=="login" -->
login content
<--/if-->
<--if: state()=="registration" -->
registration content
<--/if-->
whenever state variable changes it shows or hides the content. So my question is that i want to add animation of toggling behavior when it hides or shows for this. how would i be able to do it?
I did a quick fiddle for you.
http://jsfiddle.net/ujSvb/1/
for a more dynamic example
http://jsfiddle.net/ujSvb/2/
I further updated Anders' fiddle to add the state condition:
http://jsfiddle.net/ujSvb/3/
First, I think you may have some error in your code there(may have just copied it over wrong) but it should be:
<-- ko if: state()=="login" -->
login content
<--/ko-->
<-- ko if: state()=="registration" -->
registration content
<--/ko-->
Second, if you can use jQuery along with binding on elements instead of using virtual elements such as:
<div data-bind="if: state()=="login">
You can utilize Knockout's bindingHandlers. I have created an ifTransition binding which does what you want. Here's a fiddle with the bindingHandler and a sample of it in action:
http://jsfiddle.net/Rynan/vtPT8/
Update
Okay, I updated my fiddle to utilize the virtual elements but you will still have to wrap your login and registration content within a div to get the transition affect you are looking for. Keeping with your comment, that div won't be rendered until the state has changed to whatever it needs to be to display those certain contents so it won't take much memory while it isn't in the correct state.
Top voted answer isn't a solution since it doesn't unrender the elements.
Austins answer doesn't appear to work at all.
See my response in:
Animation before 'with' binding update
for a clean workaround I've discovered, replacing 'if' and 'with' with roughly equivalent 'template' bindings.

Replacing HTML with Javascript in a way that is executable in a browser

I have no Javascript experience at all. What I want is to replace a single instance of a block of text in a page's HTML - how can I do this?
30 minutes of reading around has brought me this:
javascript:document.body.innerHTML = document.body.innerHTML.replace("this","that");
Am I even close?
With no experiance at all I recommend you take a look at jQuery. With jQuery you can do:
Given:
<p>block of text</p>
jQuery:
$('p').text("some other block of text");
javascript:document.body.innerHTML = "that"
1) If it is part of a URL, such as <a href="...">, then you need
javascript:void(document.body.innerHTML = document.body.innerHTML.replace("this","that"));
2) If it is part of an event, such as <button onClick="...">, then you need
document.body.innerHTML = document.body.innerHTML.replace("this","that");
3) If you are trying to replace ALL instances of "this" with "that", and not just the first, then you need
... .replace(/this/g,"that")
You cannot just execute that script in the address bar. It needs to operate on a document, but there is nothing to replace there. Executing javascript from the address bar will give you a new empty document on which that code operates.
Even if you try to load a document from javascript, the rest of your script gets executed first. Try this:
javascript:window.location='http://www.google.com';alert(document.innerHTML);
You'll see that the alert pops up before the page is loaded, and it shows 'undefined'.
Even when you try binding to the onload event of the document or the window it won't work. Probably because they are reset afterwards.
javascript:window.location='http://www.google.com';window.onload=function(){alert(document.innerHTML);};
And it makes sense; if this would work, you could manipulate the next page when jumping to that page, thus making it possible to inject javascript in a page you link to. That would be a big security issue, so it's a good thing this doesn't work.

Categories

Resources