在gemfile中投入(前面版本别丢)

一在html 中的使用js有三种艺术

其三节,接上头的2节,那里大家加入socket.io的拍卖
首先,大家在./bin/www文件里加入

一、到jquerymobile.com下载最新的ZIP File,解压获得其JavaScript,
CSS和images。放到/assets/www/js目录下。如图:【其中jquery.js是从demos的js目录里复制出来的,上一篇小说中的cordova.js也移到了js目录下】

gem 'rails_kindeditor', '~> 0.5.0'
壹.1 在html 用script 标签直接把js代码加到html文件中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        alert('hello world')
    </script>
</body>
</html>
var routes = require('../routes/index');

var server = http.createServer(app);
//在server下加入socket.io的方法
/**
 * Create WebSocket server
 */
var io = require('socket.io').listen(server);
io.sockets.on('connection', routes.vote);

 金沙注册送58 1
 

   $ bundle  

一.二 在html标签用事件加入js代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body onload="alert('hello world')">
</body>
</html>

此间大家投入了socket的监听,并把socket的监听交给routes.vote来拍卖,在route/index.js中进入

2、在index.html中插手如下代码:

始建布局文件,并且引进js

一.三 用script 标签进入外部的js文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body >
<script src="../a.js"></script>  
</body>
</html>

// a.js 
alert('hello world')
router.vote = function(socket){
    socket.on('send:vote', function(data){
        var ip = socket.handshake.headers['x-forwarded-for'] || socket.handshake.address;
        //查找当前投票
        Poll.findById(data.poll_id, function(error, poll){
            var choice = poll.choices.id(data.choice);
            choice.votes.push({ip: ip});
            poll.save(function(error, doc){
                var theDoc = {
                    question: doc.question, 
                    _id: doc._id, 
                    choices: doc.choices,
                    userVoted: false, 
                    totalVotes: 0
                };
                //查询当前IP是否已经投过票
                poll.choices.forEach(function(choice, index) {
                    choice.votes.forEach(function(vote, index) {
                        theDoc.totalVotes++;
                        theDoc.ip = ip;
                        if(vote.ip === ip){
                            theDoc.userVoted = true;
                            theDoc.userChoice = { _id: choice._id, text: choice.text };
                        }
                    });
                });

                socket.emit('myvote', theDoc);
                socket.broadcast.emit('vote', theDoc);
            });
        });
    });
};

[html]
<link rel=”stylesheet” type=”text/css”
href=”js/jquery.mobile-1.3.1.css”>   
    <script src=”js/jquery.js”></script>   
     
rails使用Kindeditor网页编辑器,Mobile和PhoneGap混合开发。    <!– 那里加入项目中别的的引用 –>   
    <script type=”text/javascript” charset=”utf-8″
src=”js/cordova.js”></script> 
     
    <script src=”js/jquery.mobile-1.3.1.js”></script> 

rails g rails_kindeditor:install

rails kindeditor:assets
一.4二种情势的界别

1.2 和 一.一 的利益正是js代码直接在文书档案中不会爆发http请求,
然则却不能够缓存下来了,每3次呼吁都要加载二遍, 1.三 就恰恰和上面相反的,
一.三会发生http请求, 但是能够被浏览器缓存下来,
一.2 格局不能够加载很多的js代码否则前边就不可能维护了, 而一.叁 和1.1未有这几个题材

好了,服务端的拍卖完结了。
在public/js/services/services.js中加入

<link rel=”stylesheet” type=”text/css”
href=”js/jquery.mobile-1.3.1.css”> 
 <script src=”js/jquery.js”></script> 
 
 <!– 那里参预项目中其它的引用 –> 
 <script type=”text/javascript” charset=”utf-8″
src=”js/cordova.js”></script>
 
 <script src=”js/jquery.mobile-1.3.1.js”></script>
瞩目顺序。

金沙注册送58 ,  js获取编辑器的内容

一.五 js 代码参与的地点

js 代码壹般在多个职位加入的,
1.5.1 在head标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <script src="../a.js"></script>  
</head>
<body >

</body>
</html>


// a.js 
alert('hello world')

而是那种艺术在js 中是不只怕访问到dom属性的, 因为浏览器的在加载成功js
就立马执行了, 不过此时html还不曾加载出来, 所以无法访问到dom的,
化解的法子就是用body.onload事件加载要访问dom的js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../a.js"></script>  
</head>
<body >
  <div id="data">123456</div>
</body>
</html>


// a.js 
var div = document.getElementById('data'); // null 拿不到id为data的dom属性
console.log(div) // null
// 解决的方法 用onload事件加载要访问dom属性的js代码
document.body.onload = function() {
  var div = document.getElementById('data'); // 可以拿到dom属性
  console.log(div) // dom 对象
}

再有一个难点正是浏览器在加载js代码的时候是会阻塞html
代码的加载的,要等js 加载完结才会去加载html的,
所以若是js代码量不小或用户的网络相当的慢就会油可是生浏览器的白屏了,
那样用户体验很不好, 所以1般不会放大批量的js代码在head标签中,
放也是放很微量的js代码

//webSocket定义
.factory('socket', function($rootScope){
    var socket = io.connect();
    return {
        on: function(eventName, callback){
            socket.on(eventName, function(){
                var args = arguments;
                $rootScope.$apply(function(){
                    callback.apply(socket, args);
                });
            });
        },
        emit: function(eventName, data, callback){
            socket.emit(eventName, data, function(){
                var args = arguments;
                $rootScope.$apply(function(){
                    if(callback){
                        callback.apply(socket, args);
                    }
                });
            });
        }
    }
});

3、在</head>以前加入<meta charset=”UTF-八”> 以支撑中文。

 rails页面中进入以下表单

一.5.二 在html事件中参预js代码

那种情势同样会存在上边1.5.一的难点, 而且在那种办法, 还会更难保证了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body >
  <div id="data" onclick="var div = document.getElementById('data'); var conent = document.getElementById('conent'); conent.innerHTML = div.innerHTML">123456</div>
  <div id= "content"></div> 
</body>
</html>
// 上面的只是很少的功能, 如果再多点就基本无法维护了

public/js/controllers/controllers.js中加入

 

  <%= form_for @article do |f| %>
    <%= f.kindeditor :content, :editor_id => 'my_editor' %>
  <% end %>
一.五.三 在body 最终边用script标签 插足js代码

那种情势未有上边二种的题材,因为js代码是在css 和html的后面所以不会因为加载js代码而出现白屏了,可是在html的图形极大依然加载其余大的财富的时候,
会出现js还并未有加载成功,而html代码和css代码加载成功了,
做成的页面假死情状(轮播图不动, 按钮点击没意义的图景
因为js还不曾加载回来, 浏览器在加载大的图纸和能源)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body >
  <div id="data">123456</div>
  <script src="../a.js"></script>

</body>
</html>


// a.js 
var div = document.getElementById('data'); // null 拿不到id为data的dom属性
console.log(div) // null
// 解决的方法 用onload事件加载要访问dom属性的js代码
document.body.onload = function() {
  var div = document.getElementById('data'); // 可以拿到dom属性
  console.log(div) // dom 对象
}
//投票详情
.controller('PollItemCtrl', function($scope, $routeParams, socket, Poll){
    Poll.get($routeParams.pollId).then(function(data){
        $scope.poll = data;
    })
    //监听当前用户
    socket.on('myvote', function(data){
        console.dir(data);
        if(data._id === $routeParams.pollId){
            $scope.poll = data;
        }
    });
    //监听投票后的数据
    socket.on('vote', function(data){
        console.dir(data);
        if(data._id === $routeParams.pollId){
            $scope.poll.choices = data.choices;
            $scope.poll.totalVotes = data.totalVotes;
        }
    });
    //投票
    $scope.vote = function(){
        var pollId = $scope.poll._id,
            choiceId = $scope.poll.userVote;
        if(choiceId){
            var voteObj = {
                poll_id : pollId,
                choice: choiceId
            }
            socket.emit('send:vote', voteObj);
        }else{
            alert('请选择一个选项');
        }
    };
})

File,解压得到其JavaScript,
CSS和images。放到/assets/www/js目录下。如图:【在那之中jquery.js是从demos的js目录里复制…

    js

1.6 noscript 标签

因为浏览器有八个剥夺js脚本的选项, 所以就有了noscript标签,
那些标签是用来在禁止使用js脚本的浏览器提醒用户的,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body >
  <div id="data">123456</div>
  <script src="../a.js"></script>
  <noscript>不让js运行不给用, 哈哈哈哈</noscript>
</body>
</html>

此处是客户端的处理,以上正是全部代码了
工程地方已经上传到GitHub上了
能够经过以下地点查看或下载
代码查看

  my_editor.html();

  

  

 

相关文章

网站地图xml地图