juery tmpl else 처리

http://stackoverflow.com/questions/4989589/jquery-template-else-if-construct

jquery template 관련 자료

http://skilldrick.co.uk/tmpl/#slide14

jQuery JavaScript Templates Tutorial: Nesting Templates

jQuery JavaScript Templates Tutorial: Nesting Templates

In my last post, I presented an intro to how to create a template using the new jQuery Template plugin being developed by the Microsoft Ajax Core team. In this tutorial, I’ll show you how to nest templates to have great control over your layout.

The nesting of a template within another template is a pretty valuable feature as it lets you create a modular structure for your layout. Instead of having to create one enormous template to cover every scenario, you can break the layout apart into individual templates and piece them together. Let’s start by defining some data:

var clientData = [
     { name: "Rey Bango", age: 42, id: 1, phone: [ "954-600-1234", "954-355-5555" ] },
     { name: "Mark Goldberg", age: 51, id: 2, phone: ["954-600-1234", "954-355-5555"] },
     { name: "Jen Statford", age: "25", id: 3, phone: ["954-600-1234", "954-355-5555"] }
 ];

What I’d like to do is to render the basic information like the name and age in one template and then render the phone numbers for each client in a different template.

Like I showed in my previous post, we first create a template for our layout:

<script id="clientTemplate" type="text/html">
    <p><a href="clients/${id}">${name} - Age: ${age}</a></p>
</script>

This will display the name and age as a hyperlink included within paragraph tags. Next, we create a new template that will be used to render the phone numbers for each client”

<script id="phoneTemplate" type="text/html">
    <ul>{{each phone}}<li>${$value}</li>{{/each}}</ul>
</script>

Lastly, we’re going to include the call to “phoneTemplate” in our main template using the “tmpl” tag. This tag is used by the plugin to identify templates and parse them accordingly. Here’s what the call would look like:

{{tmpl($data) "#phoneTemplate"}}

and we’re going to include it into the main template:

<script id="clientTemplate" type="text/html">
    <p><a href="clients/${id}">${name} - Age: ${age}</a></p>
    {{tmpl($data) "#phoneTemplate"}}
</script>

This will generate the following results:

There are a couple of key things to understand here. First, let’s look at the following:

{{tmpl($data) "#phoneTemplate"}}

The variable “$data” contains the data for the current record being parsed. We’re passing it to the nested template so that we can work with that record. Let’s move onto the nested template:

<script id="phoneTemplate" type="text/html">
    <ul>{{each phone}}<li>${$value}</li>{{/each}}</ul>
</script>

Now that the current record has been passed to it, we can access the attribute name, in this case “phone”, and loop through each phone record using the ‘{{each}}‘ plugin template tag. Think of it as similar to jQuery’s $.each() method or a JavaScript “for” loop. The code will loop through each phone record creating a new list item for each one and then return to the main template to get the next main record.

Here’s the whole code for you to work with:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="robots" content="noindex" />
  <title>Template Test</title>
  <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
  <script src="jquery.tmpl.js" type="text/javascript"></script
  <script type="text/javascript">
  $(document).ready(function() {
 
        var clientData = [
            { name: "Rey Bango", age: 42, id: 1, phone: [ "954-600-1234", "954-355-5555" ] },
            { name: "Mark Goldberg", age: 51, id: 2, phone: ["617-777-1234", "617-222-3333"] },
            { name: "Jen Statford", age: "25", id: 3, phone: ["608-555-5647", "608-645-8855"] }
        ];
 
        $("#clientTemplate").tmpl(clientData).appendTo("div");
 
});
  </script>
 
<script id="clientTemplate" type="text/html">
    <p><a href="clients/${id}">${name} - Age: ${age}</a></p>
    {{tmpl($data) "#phoneTemplate"}}
</script>
 
<script id="phoneTemplate" type="text/html">
    <ul>{{each phone}}<li>${$value}</li>{{/each}}</ul>
</script>
   
</head>
  
<body>
 
<div></div>
 
</body>
</html>

출처 :  http://blog.reybango.com/2010/07/12/jquery-javascript-templates-tutorial-nesting-templates/

How to Call a JavaScript Function From a String Without Using eval

eval is evil in JavaScript! The MDN eval page states:

Obsolete
This feature is obsolete. Although it is still supported by browsers, its usage is discouraged in new projects. Try to avoid using it.

eval executes a string containing code, e.g.

1
2
eval("var x = 'Hello from eval!';");
console.log(x);

eval raises several issues:

  1. Security: your string can be injected with other commands by third-party scripts or user input.
  2. Debugging: it’s difficult to debug errors — you have no line numbers or obvious points of failure.
  3. Optimization: the JavaScript interpreter cannot necessarily pre-compile the code because it could change. While interpreters have become increasingly efficient, it’ll almost certainly run slower than native code.

Unfortunately, eval is very powerful and it’s easy for less experienced developers to overuse the command.

Despite the warnings, eval still works — even in Strict Mode — but you can normally avoid it. In the past it was primarily used for de-serializing JSON strings but we now have the safer JSON.parse method.

However, what if we have a function name in a string, e.g.

1
2
3
4
5
6
// function we want to run
var fnstring = "runMe";
 
function runMe() {
    // do stuff
}

How do we execute the runMe() function without using eval? I recently encountered this situation when using the HTML5 History API; the pushState method won’t permit you to store a direct reference to a function so you need to define its name as a string. You could also face similar challenges using Web Workers or any other API where objects are serialized.

The simplest and safest execution-without-eval solution is a range of conditions, e.g.

1
2
3
4
5
6
7
8
9
// function we want to run
var fnstring = "runMe";
 
switch (fnstring) {
    case "functionX": functionX(); break;
    case "functionY": functionY(); break;
    case "functionZ": functionZ(); break;
    case "runMe": runMe(); break;
}

It’s safe, but fairly inefficient and painful to write if you have dozens of possible function calls.

A better solution is to use the window object which references the current window and all items within it. We can check whether fnstring is available as an object within window and run it if it’s a function, e.g.

1
2
3
4
5
6
7
8
// function we want to run
var fnstring = "runMe";
 
// find object
var fn = window[fnstring];
 
// is object a function?
if (typeof fn === "function") fn();

You can perform other checks if necessary to ensure the function has an expected name.

What if the function we want to call has parameters — perhaps stored in an array? No problem; we simply use theapply method:

1
2
3
4
5
6
7
8
9
// function name and parameters to pass
var fnstring = "runMe";
var fnparams = [1, 2, 3];
 
// find object
var fn = window[fnstring];
 
// is object a function?
if (typeof fn === "function") fn.apply(null, fnparams);

So that’s another reason to stop using eval. As a bonus, this solution is safer, less error prone, easier to debug and will normally execute faster. I hope it helps.

from : http://www.htmlgoodies.com/beyond/javascript/calling-object-methods-in-javascript.html

jQuery 1.6/1.6.1에서 무었이 있었나?

jQuery 1.6/1.6.1에서 무었이 있었나?

  • .attr()에서 같이 하던 처리를 .attr()와 .prop()로 나누었다
  • 그래서 지금까지 움직였던게 움직이지않아 다시 수정하였다

지금까지 .attr()만으로 가능하던 처리를 버전1.6의 업데이트로 인하여 .attr()과 .prop()으로 나누어졌습니다. 버전업을 하면 그대로 움직이는 코드도있고 움직이지않는 코드가 있어 많은 혼란이 발생합니다.
많은 혼란으로 결국 버전업데이트 1.6.1에서 .attr()을 예전처럼 움직일수있도록 다시수정되었습니다.

왜 .attr()을 .prop()으로 나누었는가?

  • 원래 따로해야할 문제였다.
  • 같이 사용하는 문제로 버그가 많아져버렸다.

이건 jQuery개발자의 사정입니다.
원래JavaScript로서는  .attr()과 .prop()는 다른것입니다. 다른것이지만 jQuery에선는 차이를 숨기고(?) 같은것인것 처럼사용하고 있었습니다.
그러나 원래 다른것을 같은것처럼 사용할려고 하니 문제가 생겨 최근에는 그쪽 처리 부분에 버그가 많아 져버렸습니다. 그래서 버전1.6에선 [과감히 나누어 심플하게 하자!] 라고하는 생각한 것 같습니다.(상세하게 찾아보진않아서 내부 사정은 다를수도 있습니다.)
하지만「지금까지의 코드가 움직이지않아」 즉 호환성이 없는 문제로 많은 혼란을 낳게 되었습니다. 그리하여 .attr()의 처리를 수정하여 지금까지의 코드를 그대로 움직이게 버전 1.6.1로 업데이트를 하였습니다.(하지만 1.6.1도 불완전한것 같습니다.)

.attr()과 .prop()는 무었이 다른가?

  • .attr()는HTML의속성을 취급
  • .prop()는JavaScript프로파티을 취급
  • 양쪽은 같은 이름에서 다른게 있다.

이 두개의 메소드는 취급하는 정보가 다릅니다. .attr()는HTML의 속석(attribute)을、 .prop()는 JavaScript의 프로파티(property)를 취급하는 메소드입니다.
여기에서 혼란하기 십상인것이 속성과 프로파티는 「같지만 다른것」이라는 것입니다.
간단한 예로 링크의 URL입니다.

1<a id="to_comments" href="#comments">코멘트 일람</a>

아무것도 없는 페이지안의 점프 링크입니다. 여기 링크URL는 .attr()과 .prop()의 어느쪽이라도 취득할수있다(!)라고 생각할수도 있지만 사실 다릅니다.

1var $link = $('#to_comments');
2alert($link.attr('href'));  // href속성값을 표시
3alert($link.prop('href'));  // href프로파티의 값을 표시

그럼 무엇이 표시될까요?

  • .attr() → #to_comment
  • .prop() → http://example.com/path/to/page#to_comment

완전 다른결과가 나옵니다.……! Σ(°д°;)
사실은 「속성」이란것은 HTML으로서 기록되어있는 속성의 내용입니다. 물론 당신이 href="http://…"라고 적었을경우는 그대로 취득할수있습니다.
한편「프로파티」라고 하는 것은 JavaScript취급하는 하는 정보입니다. 이정보는 HTML에 기록되어있는 내용과 일치한다고는 할수없습니다.
하나더 예를 들어보겠습니다. 체크박스의 checked의 대하여 입니다.

1<checkbox id="private" type="checkbox" checked />

체크박스의 checked의 값을 확인합니다.

1var $checkbox = $('#private');
2alert($checkbox.attr('checked'));  // checked속성의 값을 표시
3alert($checkbox.prop('checked'));  // checked프로파티값을 표시

자 무엇이 표시될까요?

  • .attr() → "checked"
  • .prop() → true

이것도 결과가 다릅니다.
또 화면의 체크박스를 클릭하여 체크를 해제해보겠습니다.

  • .attr() → "checked"
  • .prop() → false

.attr()의 경우는 변하지않습니다. 체크가 되어있는지 판단을 할경우 .prop()을 사용할 필요가 있습니다.
어떻습니까? 예상할수있었나요?
※또 [checked속성의 값은 왜 checked라고하는 문자열이 될까?]라는 이야긴 HTML의 이야기가 되기때문에 하지않겠습니다. 간단히 설명하면 checkedselected같은 값이 없는 속성의 값은 속성의 이름과 같아집니다.

.attr()과 .prop()사용법은 어떻게 판단하면 좋을까?

음...감이네요... JavaScript에 익숙해지면 큰문제가 되지않을거라고 생각합니다.
간단하게 말해서 HTML에 쓴 속성의 값을 취급하고 싶을경우는 .attr()을 이외의 JavaScript의것을 할경우는 .prop()을 사용하면 어떨까요?]


출처 : http://javascriptandjquerydev.blogspot.kr/2012/07/attr-prop.html