2014-07-02 94 views
0

我正在嘗試製作一個允許用戶提交問題的列表。即時通訊使用淘汰賽,我可以得到它正是我想要它做的事情,但當我嘗試在微軟視覺工作室調試它不工作,他們的方式,我想要它。當我調試時,頁面打開與小提琴相同,但問題列表中缺少「測試問題」。您也可以輸入添加問題文本框,但是當您點擊提交時,它會清除並且不會添加到問題列表中準備好我的代碼

有人告訴我需要添加一個已準備好,但即時通訊仍然是學習如何編寫代碼的新手不確定

A.How就做 B.如果把它

這裏是我的小提琴

http://jsfiddle.net/grahamwalsh/rCB9V/

,這裏是我的代碼

IssueList(HTML)

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Issue List</title> 
<script src="Scripts/jquery-2.1.1.js"></script> 
<script src="Scripts/knockout-3.1.0.js"></script> 
<script src="Issuelist.js"></script> 
<link type="text/css" rel="stylesheet" href="Issuelistcss.css" /> 
</head> 
<body> 
<div class='issuelist'> 

<form data-bind="submit:addIssue"> 
    Add Issue: <input type="text" data-bind='value:issueToAdd, valueUpdate: "afterkeydown"' /> 
    <button type="submit" data-bind="enable: issueToAdd().length > 0">Add</button> 
</form> 

<p>Your Issues:</p> 
<select multiple="multiple" height="5" data-bind="options:allIssues, selectedOptions:selectedIssues"> </select> 

<div> 
    <button data-bind="click: removeSelected, enable: selectedIssues().length > 0">Remove</button> 
    <button data-bind="click: sortIssues, enable: allIssues().length > 1">Sort</button> 
</div> 

</div> 
</body> 
</html> 

的CSS

body { font-family: arial; font-size: 14px; } 
.issuelist { padding: 1em; background-color: #87CEEB; border: 1px solid #CCC; max-width: 655px; } 
.issuelist input { font-family: Arial; } 
.issuelist b { font-weight: bold; } 
.issuelist p { margin-top: 0.9em; margin-bottom: 0.9em; } 
.issuelist select[multiple] { width: 100%; height: 8em; } 
.issuelist h2 { margin-top: 0.4em; } 

JS

var Issuelist = function() { 
this.issueToAdd = ko.observable(""); 
this.allIssues = ko.observableArray(["test"]); 
this.selectedIssues = ko.observableArray(["test"]); 

this.addIssue = function() { 
if ((this.issueToAdd() != "") && (this.allIssues.indexOf(this.issueToAdd()) < 0)) 
    this.allIssues.push(this.issueToAdd()); 
this.issueToAdd(""); 
}; 

this.removeSelected = function() { 
this.allIssues.removeAll(this.selectedIssues()); 
this.selectedIssues([]); 
}; 

this.sortIssues = function() { 
this.allIssues.sort(); 
}; 
}; 

ko.applyBindings(new Issuelist()); 

回答

1

要運行功能,當頁面準備使用jQuery:

$(document).ready(function(){ 
    //Code goes here 
} 
+0

這樣做我把$(做cument).ready(function(){在我的js文件的開始和}結尾處? – user3662011

+1

您只想包裝在文檔加載時需要運行的內容。如果你發佈的是你所有的js文件包含的,那麼是的,整個事情需要在$(document).ready中運行。 – Curlystraw