[我的前端筆記] jQuery 綁定小範例

利用陣列(array)跟物件(object) 組成一個Model

接著再用keyup或是change...等監聽事件

當前端UI的資料有異動時事件被觸發時將Element上的值覆蓋回Model

在此範例中假設有接收到後端資料資料時去Call renderForm();

就會把Model 資料填到UI上 達到綁定的效果

See the Pen jQuery 綁定資料 by AllenYu (@allenyjs) on CodePen.

網址後面出現奇怪的url encode 字串"%E2%80%8B"

今天遇到了一個有點詭異的問題

在網頁上點連接時應該要連到下面這個網址
http://[某某網址]/index.html

結果連過去後卻發現異常無法顯示
實在是有點奇怪
難道是連結網址貼錯嗎???
立馬複製瀏覽器上的網址貼到記事本一看
http://[某某網址]/index.html%E2%80%8B

怎麼會多出了一段%E2%80%8B
於是又馬上去檢查檔案
<a herf="http://[某某網址]/index.html">

沒錯啊!!!~~~~~

那我看到的那段UrlEncode "%E2%80%8B" 又是怎麼一回事呢?

在google大神的大力相助一下
我找到了一些答案

應該是因為現在大家習慣Ctrl+C Ctrl+V

網址有可能來源是word 有時候存在記事本
也有可能是sublime Dreamweaver notepad++ ...等

大家複製來複製去的過程中不知道在哪個編輯器上順手就帶上了"%E2%80%8B"

我找到的答案應該是這樣 還望高人指點...

補充一下這兩篇也有提到這個問題 底下回覆有人是因為從MS word複製網址後出現"%E2%80%8B"

https://premium.wpmudev.org/forums/topic/something-is-breaking-my-links-with-

https://forums.digitalpoint.com/threads/why-are-some-of-my-urls-getting-appended-with-e2-80-8e.2716588/

如果是C#的話可以用以下方式解決這個麻煩
MailItem.Body.Replace("\u200B", "");
參考這篇:
http://stackoverflow.com/questions/24942167/simplest-way-to-get-rid-of-zero-width-space-in-c-sharp-string

如果是Javascript的話可以用正規式的方式處理
參考這篇:
http://zhi-yuan-chenge.blogspot.tw/2015/10/jsie-buge2808e.html

[筆記] 使用Compass Sprite x 自動合併圖片 x 自動產生background-position

1.開啟「命令提示字元」，建立compress專案

2.開啟compress設定檔，檢查設定

3.根據設定建立對應的images及icons資料夾

4.再資料夾中放入要合併的素材圖片

5.建立一個新的scss檔

6.在scss檔中寫入內容，完成後記得儲存檔案

7.儲存檔案後，在「命令提示字元」輸入指令compile 本範例輸入"compass compile test1"

8.完成後會自動在剛剛config.rb設定的相對路徑中generate相對應的css檔，預設是stylesheets資料夾

9.這個時候開啟sprite.css及images資料夾可以看到已經自動generate了css及合併後的圖檔

我的AngularJS初學筆記(三) Filters

利用AngularJS過濾器(Filters)
可以將資料轉換成大寫、小寫、貨幣格式
或達成排序、過濾篩選資料等效果


以下是我的練習範例

See the Pen AngularJS 練習範例3 Filters by AllenYu (@allenyjs) on CodePen.

我的AngularJS初學筆記(二) Controllers

練習用AngularJS透過Controllers來控制網頁
並且透過$scope物件做雙向設定
在網上有許多介紹$scope物件的文章
http://www.dotblogs.com.tw/blackie1019/archive/2013/09/21/119101.aspx
http://ithelp.ithome.com.tw/question/10133017

以下是我練習的範例

See the Pen AngularJs練習範例2 by AllenYu (@allenyjs) on CodePen.

我的AngularJS初學筆記(一) Expressions 與 Directives

在使用前必須先載入angular.js 在官網上可以下載
第一步在需要設為AngularJS管轄區域的html tag上加上 屬性data-ng-app
例如<body data-ng-app=""> 或 <div data-ng-app="">
以往用Javascript或Jquery需要數行的程式碼
用AngularJS只要做些簡單的屬性設定就可以完成

以下是我了練習範例

See the Pen angular練習範例1 by AllenYu (@allenyjs) on CodePen.

我的requireJS初學練習筆記

練習範例1

• test1.html

  在HTML檔案中引入require.js並將data-main設為js資料夾中的common檔案，由於requireJS預設副檔名為js所以可以省略

            <html>
              <head>
                <script data-main="js/common" src="js/require.js"></script>
              </head>
              <body>
                123
              </body>
            </html>
            

• js(Folder)
  • common.js

              require.config({
                  paths: {
                      jquery: 'jquery-2.1.4.min',
                      underscore: 'underscore',
                      backbone: 'backbone'
                  }
              });
              require(['test1']);
              

  • test1.js

              define(function (require) {
                  var $ = require('jquery');
                var _ = require('underscore');
                var backbone = require('backbone');
    
                  $(function(){
                      alert("a");
                      var JQv=$().jquery;
                      var BKv=Backbone.VERSION;
                      var Undv=_.VERSION;
    
                      var myView = Backbone.View.extend({
                          el: $("body"),
                          initialize: function () {
                              this.showLoadinfo(JQv,Undv,BKv);
                          },
                          showLoadinfo: function (JQv,BKv,Undv) {
                              var hStr="<h1>載入測試</h1><ul id='mylist'>";
                              hStr+="<li>1. JQuery版本:"+JQv+"</li>";
                              hStr+="<li>2. Backbone版本:"+Undv+"</li>";
                              hStr+="<li>3. underscore版本:"+BKv+"</li>";
                              hStr+="</ul>";
                              this.$el.html(hStr);
                          }
                      });
                      var myLoadinfoView = new myView();
    
                  });
              });
              

結果:

載入測試

• 1. JQuery版本:2.1.4
• 2. Backbone版本:1.2.1
• 3. underscore版本:1.8.3

練習範例2

• test2.html

  在HTML檔案中引入require.js並將data-main設為js資料夾中的test2檔案，由於requireJS預設副檔名為js所以可以省略

            <html>
              <head>
                <script data-main="js/test2" src="js/require.js"></script>
              </head>
              <body>
                123
              </body>
            </html>
            

• js(Folder)
  • common2.js

              require.config({
                  paths: {
                      jquery: 'jquery-2.1.4.min',
                      underscore: 'underscore',
                      backbone: 'backbone',
                      myTestFunc: 'myTestFunc'
                  }
              });
              require(['test1']);
              

  • test2.js

              require(['common2'], function (common){
                require(['myTestFunc']);
              });
              

  • myTestFunc.js

              define(function (require) {
                  var $ = require('jquery');
                var _ = require('underscore');
                var backbone = require('backbone');
    
                  $(function(){
                      alert("a");
                      var JQv=$().jquery;
                      var BKv=Backbone.VERSION;
                      var Undv=_.VERSION;
    
                      var myView = Backbone.View.extend({
                          el: $("body"),
                          initialize: function () {
                              this.showLoadinfo(JQv,Undv,BKv);
                          },
                          showLoadinfo: function (JQv,BKv,Undv) {
                              var hStr="<h1>載入測試</h1><ul id='mylist'>";
                              hStr+="<li>1. JQuery版本:"+JQv+"</li>";
                              hStr+="<li>2. Backbone版本:"+Undv+"</li>";
                              hStr+="<li>3. underscore版本:"+BKv+"</li>";
                              hStr+="</ul>";
                              this.$el.html(hStr);
                          }
                      });
                      var myLoadinfoView = new myView();
    
                  });
              });
              

結果:

載入測試

• 1. JQuery版本:2.1.4
• 2. Backbone版本:1.2.1
• 3. underscore版本:1.8.3