I'm trying to create a pinterest pin it button.
Below is the code:
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
As you see there are three variables:
url : http%3A%2F%2Fwww.domain.name%2Fproduct%2F#Model.ProductDetails.URLName
media: http%3A%2F%2Fwww.domain.name%2Fproduct%2F#Model.ProductDetails.Image
description: #Model.ProductDetails.ProductDescription
In all three variables some data is coming from ViewModel using #Model
But only #Model.ProductDetails.ProductDescription is working
And the other two are not working maybe because they are part of a bigger string.
The razor parser thinks that the first two values are email addresses or similar and so leaves them as plain text. In order to inform the parser that they should be evaluated you need to use an Explicit Expression, eg #(Model.Property), so your variables would be:
url : http%3A%2F%2Fwww.domain.name%2Fproduct%2F#(Model.ProductDetails.URLName)
media: http%3A%2F%2Fwww.domain.name%2Fproduct%2F#(Model.ProductDetails.Image)
description: #(Model.ProductDetails.ProductDescription)
And your snippet would be:
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
I generally keep Phil Haack's Razor Quick Reference guide bookmarked!
Related
It is simple example HTML for demonstration my issue
<!DOCTYPE html>
<html>
<body>
<div>
<label>This value comes from internal</label>
<div>
<div name='internal'>$11.11</div>
</div>
<div>
<label>This value comes from external</label>
<div>
<input type ='text' name='internal' readonly='true'>
</div>
</div>
</body>
</html>
//Display in Web Browser
This value comes from internal
11.11
This value comes from external
55.55
I want to get $55.55, but I searched "//*[text()='$55.55']" with inspector but I could not find any $55.55
and I figured out this $55.55 value comes from external JS and changed DOM and display.
This value displayed on browser but I could not get Xpath of input value
How can I get Xpath get this value "$55.55"
Thank you
Well, I dont know if I correctly understand your question, but if your goal is to get the input's value you can do something easy as, without the need of XPath:
var myInputValue = document.querySelector('input[name=internal]').value;
console.log(myInputValue);
I'm trying to add a new paragraph to a document using document.createElement. It's not working for me.
HTML file:
<section class="first">
<h2>Properties Tutorial</h2>
<p>No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an ideal and if they can't stop you then you become something
else entirely. Legend, Mr Wayne.</p>
<h2 class="second-heading">I am the DOM</h2>
<p>You know what you said about the structures becoming shackles. You were right and I can't take it, the injustice. I mean, no one ever's gonna know who saved the entire city.</p>
<img class="custom-img" src="" alt="Kitty image" />
</section>
JS file:
const newP = document.createElement('p');
.first.appendChild('newP');
newP.textContent = 'Say my name!';
console.log(newP);
I expect for the element to be created with document.createElement, text to be added with element.textContent and for the element to be added to the children of the section with class of "first" through the appendChild method.
From the snippet you post, you mistyped:
.first.appendChild('newP');
It should have been:
document.getElementsByClassName('first')[0].appendChild(newP)
Try this:
const newP = document.createElement('p');
newP.innerHTML = 'Say my name!'
document.getElementsByClassName('first')[0].appendChild(newP);
<section id="first" class="first">
<h2>Properties Tutorial</h2>
<p>No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an ideal and if they can't stop you then you become something
else entirely. Legend, Mr Wayne.</p>
<h2 class="second-heading">I am the DOM</h2>
<p>You know what you said about the structures becoming shackles. You were right and I can't take it, the injustice. I mean, no one ever's gonna know who saved the entire city.</p>
<img class="custom-img" src="" alt="Kitty image" />
</section>
you can try below code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<section class="first">
<h2>Properties Tutorial</h2>
<p>No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an ideal and if they can't stop you then you become somethingelse entirely. Legend, Mr Wayne.</p>
<h2 class="second-heading">I am the DOM</h2>
<p>You know what you said about the structures becoming shackles. You were right and I can't take it, the injustice. I mean, no one ever's gonna know who saved the entire city.</p>
<img class="custom-img" src="" alt="Kitty image" />
</section>
<button id="add">Add Paragraph</button>
<script type="text/javascript">
var first = document.getElementsByClassName('first')[0],
add = document.getElementById('add');
add.onclick = function(){
var p = document.createElement('p');
p.textContent = "Say my name!";
first.appendChild(p);
}
</script>
</body>
</html>
The button will produce tag p inside class first with appendChild method.
The documentation on source binding has an aside which states:
Important: A single root element should be used in the template when
binding to an array. Having two first level DOM elements will result
in an erratic behavior.
However, I'm finding that this is the case even for non arrays.
I have the following HTML, which sets up two div's populated by two templates. The only difference is that the working template wraps that databound spans in a div.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<title>JS Bin</title>
<script id="broken-template" type="text/x-kendo-template">
Foo: <span data-bind="text: foo"></span><br/>
Foo Again: <span data-bind="text: foo"></span>
</script>
<script id="working-template" type="text/x-kendo-template">
<div>
Foo: <span data-bind="text: foo"></span><br/>
Foo Again: <span data-bind="text: foo"></span>
</div>
</script>
</head>
<body>
<div id="broken-div" data-template="broken-template" data-bind="source: this">
</div>
<br/>
<br/>
<div id="working-div" data-template="working-template" data-bind="source: this">
</div>
</body>
</html>
And the JavaScript simply creates a view model with a single property and binds it to both divs:
var viewModel = kendo.observable({foo: "bar"});
kendo.bind($("#broken-div"), viewModel);
kendo.bind($("#working-div"), viewModel);
In both cases, only the first root element and it's children are being bound properly. This suggests that every time I databind to template with more than one element I need to make sure it is wrapped in a single root.
Is this behavior documented somewhere? Is there a bug in Kendo or in my sample code? An explanation for why Kendo requires a single root would be great to hear as well.
(Sample code as a jsfiddle)
It's not documented except in the one place you mentioned. Such is the state of Kendo UI documentation - it's less than complete. I've been using Kendo UI for three years and as far as I can tell you, this is its default behavior and not a bug. Unfortunately, it's one of the many quirks you simply learn (stumble upon) from experience.
I have a rather large ASP.NET MVC web application which uses KnockoutJS extensively throughout. Over the years I've created many templates for the application, however they all reside in various web pages using named script tags. It's almost become unbearable to manage them on the various views. I'd like to figure out a way to consolidate these templates into their own html files so that they are more manageable.
I'd like to know if there are any libraries out there that supports this concept? I don't want to reinvent the wheel, as I'm sure someone has already ran into this problem in the past and solved it. Here is a quick overview of what I'm dealing with...
Basically, I have a lot of content that resembles the following markup. Notice that I have my templates defined in the same page as my actual content markup:
[[ HOME/INDEX.CSHTML ]]
<h1>Customers</h1>
<div data-bind="template: {name: 'personTmpl', foreach: customers}"></div>
<h1>Products</h1>
<div data-bind="template: {name: 'productTmpl', foreach: products}"></div>
<script type="text/html" id="personTmpl">
Name: <span data-bind="text: name" />
Address: <span data-bind="text: address" />
</script>
<script type="text/html" id="productTmpl">
Description: <span data-bind="text: description" />
Category: <span data-bind="text: category" />
</script>
<script type="text/javascript">
$(function(){
var json = {
customers: [ { name: 'Joe', address: 'Denver, CO' } ],
products: [ { name: 'Skis', category: 'Outdoors' } ]
};
var vm = new CustomViewModel(json);
ko.applyBindings(vm);
});
</script>
[[ END HOME/INDEX.CSHTML ]]
What I'd like to do is store the personTmpl and productTmpl in their own html file and pull them into the view as needed. This would allow me to only have the content markup in my cshtml file. Plus it would enable me to use the templates from anywhere (ie. Customers\Index, Products\Show, Home\Index, etc..).
I would expect that it would require some custom js on each page, but I think this is a small price to pay for cleaning up the clutter and making my templates available to all views. I could see me using some server side tags on each page or something like this (merely an example):
#section templates {
#Content.Template("Person.tmpl", Url)
#Content.Template("Product.tmpl", Url)
}
<h1>Customers</h1>
<div data-bind="template: {name: 'personTmpl', foreach: customers}"></div>
<h1>Products</h1>
<div data-bind="template: {name: 'productTmpl', foreach: products}"></div>
<script type="text/javascript">
$(function(){
var json = #Html.Raw(Json.Encode(ViewBag.PageData)));
var vm = new CustomViewModel(json);
ko.applyBindings(vm);
});
</script>
With storing them into their own templates, I could even query the content dynamically for tooltips and dialogs using old fashion $.get('/tmpl/Person.tmpl', renderFunc).
Again, I don't mind creating my own implementation, but I'm convinced there is a solution out there already. Anybody?
Thanks in advance!!
My recommendation would be to look at the external template engine here: https://github.com/ifandelse/Knockout.js-External-Template-Engine
It allows you to place your templates in external files, reference them in your binding just as you normally would using the name parameter, and uses some conventions or configuration to determine the exact path to find the template file.
The external template engine is a pretty robust solution. I have also recently been using require.js with its text plugin for this purpose as well. More info in this answer: knockout.js loading templates at runtime
If you want to render them in-line, then I suppose a helper function could load the file and wrap it in a script tag with a non-JS type.
[ProductTitle]
[ThumbnailImage]
<a href="http://pinterest.com/pin/create/button/?url=lerivinos.com&media=lerivinos.com"
class="pin-it-button"
count-layout="horizontal">
Pin It
</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
[OurPrice]
[AddToCart]
your sample code doesn't have the img link which pinterest give you in the code snippet.
Assuming you mis-copied and omitted it, I had the same problem because pinterest give you this:
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
I had to add http: to the src to get it to work, ie:
<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" />
Hope that helps.
The media parameter of your pintrest url should point at your image file, like so:
<a href="http://pinterest.com/pin/create/button/?url=lerivinos.com&media=https://www.google.com/images/srpr/logo3w.png"
class="pin-it-button"
count-layout="horizontal">
Pin It
</a>
From the pintrest goodies page