Блог

Главная - Вопросы по программированию - Сортируемый список работает на скрипке, но не в Visual studios

Сортируемый список работает на скрипке, но не в Visual studios

#javascript #list #knockout.js

#javascript #Список #knockout.js

Вопрос:

Я пытаюсь составить список, который позволяет пользователю отправлять проблемы. Я использую knockout, и я могу заставить его делать именно то, что я хотел, но когда я пытаюсь отлаживать в Microsoft Visual studios, это работает не так, как я хочу. При отладке страница открывается так же, как в скрипте, за исключением того, что в списке проблем отсутствует «тестовая проблема». Также вы можете ввести текстовое поле добавить проблему, но при нажатии кнопки отправить оно очищается и не добавляется в список проблем

Вот моя скрипка

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

и вот мой код

Список проблем ( 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>

Issuelistcss (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() != "") amp;amp; (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. Итак, когда вы запускаете без отладчика, все в порядке, но с отладчиком он ломается?

2. Когда я нажимаю «Отладка», он открывает Chrome, как и должен, но когда он открывается, в поле «Ваша проблема» нет «теста», также когда я пытаюсь добавить проблему, когда я нажимаю «Отправить», поле очищается, и ничего не добавляется

3. Есть ли у вас какой-либо JS-пакетник в вашем проекте?