0

这类似于问题https://stackoverflow.com/questions/13693170/changed-version-of-knockout-js

我想将代码从 jsfiddle 移动到本地系统进行测试。该代码适用于添加、检查、删除。但是，它不做的是从 model.js 中加载假数据。我已经改变了/echo/json。到本地网址。我还需要做什么？使用最新的火狐。

模型.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 回答