如何從移動的jsfiddle代碼以本地系統進行測試

Question

這類似於到問題https://stackoverflow.com/questions/13693170/changed-version-of-knockout-js

我想從的jsfiddle代碼移動到本地系統進行測試。該代碼適用於添加，檢查，刪除。但是，它沒有做的是從model.js中加載僞造的數據。我改變了/ echo/json。到本地網址。我還需要做什麼？使用最新的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> 

Answer 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要求的格式發佈的數據（即不與「JSON」字段在jsfiddle的json-echo服務API中使用的數據）