0

これは質問https://stackoverflow.com/questions/13693170/changed-version-of-knockout-jsに似ています

テストのためにコードをjsfiddleからローカルシステムに移動したいと思います。コードは、追加、チェック、削除に対して機能します。ただし、model.js 内から偽のデータをロードすることはしません。/echo/json を変更しました。ローカル URL へ。他に何をする必要がありますか? 最新のfirefoxを使用。

model.js >>>>

$(document).ready(function() {

var fakeData = [{
    "title": "Wire the money to Panama",
    "isDone": true},
{
    "title": "Get hair dye, beard trimmer, dark glasses and passport",
    "isDone": false},
{
    "title": "Book taxi to airport",
    "isDone": false},
{
    "title": "Arrange for someone to look after the cat",
    "isDone": false}];


function Task(data) {
    this.title = ko.observable(data.title);
    this.isDone = ko.observable(data.isDone);
}

function TaskListViewModel() {
    // Data
    var self = this;
    self.tasks = ko.observableArray([]);
    self.newTaskText = ko.observable();
    self.incompleteTasks = ko.computed(function() {
        return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() && !task._destroy });
    });

    // Operations
    self.addTask = function() {
        self.tasks.push(new Task({ title: this.newTaskText() }));
        self.newTaskText("");
    };
    self.removeTask = function(task) { self.tasks.destroy(task) };
    self.save = function() {
        $.ajax("/ds", {
            data: {
                json: ko.toJSON({
                    tasks: this.tasks
                })
            },
            type: "POST",
            dataType: 'json',
            success: function(result) {
                alert(ko.toJSON(result))
            }
        });
    };

     //Load initial state from server, convert it to Task instances, then populate self.tasks
    $.ajax("/ds", {
        data: {
            json: ko.toJSON(fakeData)
        },
        type: "POST",
        dataType: 'json',
        success: function(data) {
            var mappedTasks = $.map(data, function(item) {
                return new Task(item);
            });

            self.tasks(mappedTasks);
        }
    });                               
}

ko.applyBindings(new TaskListViewModel());

});

ds.html

<script type="text/javascript" src="static/js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="static/js/knockout-2.0.0.js"></script>



<p>
<div class="codeRunner">

    <h3>Tasks</h3>

    <form data-bind="submit: addTask">
        Add task: <input data-bind="value: newTaskText" placeholder="What needs to be done?" />
        <button type="submit">Add</button>
    </form>

    <ul data-bind="foreach: tasks, visible: tasks().length > 0">
        <li>
            <input type="checkbox" data-bind="checked: isDone" />
            <input data-bind="value: title, disable: isDone" />
            <a href="#" data-bind="click: $parent.removeTask">Delete</a>
        </li>
    </ul>

    You have <b data-bind="text: incompleteTasks().length">&nbsp;</b> incomplete task(s)
    <span data-bind="visible: incompleteTasks().length == 0"> - it's beer time!</span>

    <button data-bind="click: save">Save</button>

</div>

</p>

<script type="text/javascript" src="static/js/model.js" ></script>
4

1 に答える 1

1

フィドルの ajax リクエストは、実際のシナリオをシミュレートするための単なるモック リクエストであり、実際には必要ありません。ajax リクエストなしでその偽のデータを使用できます。たとえば、次の部分を変更します。

self.save = function() {
    alert(ko.toJSON({tasks: this.tasks}));    
};


//Load initial state from server, convert it to Task instances, then populate self.tasks
var mappedTasks = $.map(fakeData, function(item) {
    return new Task(item);
});

self.tasks(mappedTasks);

ajax リクエストを使用して実際のデータを取得する場合は、独自のサーバー API で必要な形式でデータを投稿する必要があります (つまり、jsfiddle の json-echo サービスで使用されるデータの「json」フィールドではありません)。 API）

于 2012-12-06T21:50:41.423 に答える